Fiori Elements- Use of value help

Using Value Help in the search field 

---

In the last post Fiori Elements- CDS View with Association we have designed a Fiori App with a search and list screen for SCARR table and then association to the SPFLI table data.

In this post, let’s see more about the search field.

Let’s look the fiori app what we have before.

---

@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
}
@EndUserText.label: ‘Carrier Name’
carrname,
—————————————————————————————
@UI: {
fieldGroup: [{ qualifier: ‘General’, position: 20 }],
lineItem: [{ position: 30 }],
identification: [{ position: 30 }]
}
currcode,
—————————————————————————————

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

---

In the webIDE, execute/run the project . The search is enabled for the view with CARRID as the default search field and then we have assigned a field group property to CARRNAME and CURRENCY field.

Then out all the 4 fields of the view, 2 fields are assigned to a custom field group whose name  is ‘General’ and other three fields CARRID and URL are assigned to the default consumption group. As CARRID is the default search field it doesn’t make sense to display the field again in the consumption group.

---

---

---

Let’s add the annotation ‘@Consumption.filter.hidden: true’ to the field carrid and url. and then check the app.

---

So the consumption group is hidden now as 2 field are consumption filter hidden and other 2 fields are belong to other field group.

---

Now let’s see the F4 help values for the Currency field. Select the Airline Currency field from the filter.

Select Go.

Press the F4 option for the currency field. and then we can see there are no F4 option of the value but we can manually enter the values in the include and exclude part. But this is not we want. we want to see the currency value like EUR, USD, INR, …. that we can see and select. No manual type.

---

To get the F4 value help, let’s design a CDS view and let’s sect all distinct currency from the table and then we can assign this CDS view to the currency field.

---

Now add the highlighted part to the “currcode” field.  and then test the app.

Now if you add the currency field in the search section from the Adapt filter. and click on the drop down we can see all the currency values and we can select only one currency as multipleSelection = false.

---

Make multipleSelection = true.

We can select multiple values from the F4 option.

---

@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
@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 }], // list view position
identification: [{ position: 20 }] // details view position
}
@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 }] }
@Consumption.filter.hidden: true // hide this field in the consumption filter
url,
—————————————————————————————
/* Associations */
//ZZ_SCARR_TP
_Spfli
}

---