Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

SAP Learning Journey

Enriching Value Help with Dependent Filtering

Objectives

After completing this lesson, you will be able to:

Set up filter dependency between fields

Value Help and Dependent Filtering

You can define which fields to display on the value help dialog by using the annotation @Common.ValueList. This is applicable to filter fields and the fields with value help in Edit and Create mode. For example, fields of a table in an object page, fields in sections or subsections.

Consider the following sample code:

Code snippet


annotate my.Booking { 
 to_Carrier @Common.ValueList: { 
    CollectionPath : 'Airline', 
    Label : '', 
    Parameters : [ 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: to_Carrier_AirlineID, ValueListProperty: 'AirlineID'}, 
      {$Type: 'Common.ValueListParameterDisplayOnly', ValueListProperty: 'Name'}, 
      {$Type: 'Common.ValueListParameterDisplayOnly', ValueListProperty: 'CurrencyCode_code'} 
    ] 
  }; 
}

Expand

In the sample code, for the entity Booking, the value help of the entity Airline has the value CollectionPath: 'Airline'. The first parameter of the entity Airline, maps the main entity property to_Carrier_AirlineID to the value help entity property AirlineID. The other two parameters, Name and CurrencyCode_code are a part of the entity Airline, and are of type Common.ValueListParameterDisplayOnly. They are used only for display in the value help dialog. The properties in Parameters of the type @Common.ValueList annotation are displayed in the value help dialog.

Let's familiarize the other three types of parameters.

Parameter type: Common.ValueListParameterIn

These parameters influence the filtering of value help of the annotated field.

Code snippet


annotate my.Booking { 
  ConnectionID @Common.ValueList: { 
    CollectionPath : 'Flight', 
    Label : '', 
    Parameters : [ 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: to_Carrier_AirlineID,    ValueListProperty: 'AirlineID'}, 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: ConnectionID, ValueListProperty: 'ConnectionID'}, 
{$Type: 'Common.ValueListParameterIn', LocalDataProperty: FlightDate,  ValueListProperty: 'FlightDate'}, 
 …. 
] 
}

Expand

In the preceding sample code, for the Booking entity, the annotated field is ConnectionID. The FlightDate is of the parameter type Common.ValueListParameterIn. It means that if a user has selected the flight date from the Flight Date field, then this value is used to filter the values displayed in the value help dialog for the Flight Number(ConnectionID) field.

Parameter type: Common.ValueListParameterOut
Code snippet
```
annotate my.Booking { 
  ConnectionID @Common.ValueList: { 
    CollectionPath : 'Flight', 
    Label : '', 
    Parameters : [ 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: to_Carrier_AirlineID,    ValueListProperty: 'AirlineID'}, 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: ConnectionID, ValueListProperty: 'ConnectionID'}, 
{$Type: 'Common.ValueListParameterOut', LocalDataProperty: FlightDate,  ValueListProperty: 'FlightDate'}, 
 …. 
] 
} 
```
Expand
In the preceding sample code, for the Booking entity, the annotated field is ConnectionID. The FlightDate is of the parameter type Common.ValueListParameterOut. It means that if a user selects an airline from the value help dialog of the ConnectionID field, then the Flight Date field gets auto-populated with the corresponding value.
In contrast to the parameter type Common.ValueListParameterIn, this value isn't used to filter the value help dialog of the ConnenctionID field.
Parameter type:Common.ValueListParameterInOut
It is a combination of both In and Out parameter features.
Code snippet
```
annotate my.Booking { 
  ConnectionID @Common.ValueList: { 
    CollectionPath : 'Flight', 
    Label : '', 
    Parameters : [ 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: to_Carrier_AirlineID,    ValueListProperty: 'AirlineID'}, 
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: ConnectionID, ValueListProperty: 'ConnectionID'}, 
 …. 
] 
} 
```
Expand
In the preceding sample code, you can see that there is dependent filtering. For example, if you select the airline European Airlines (EA) from the Airline field, this value is set as a filter value for the Flight Number (ConnectionID) value help dialog and displays the flights for the selected airline only. This is the feature of the In parameter.
If a user selects a value from the value help dialog for the field ConnectionID, then the Airline field gets auto-populated with the corresponding entry. Similarly, if you select a flight number in the Flight Number, the Airline field gets auto-populated with the corresponding information.

Add Dependent Filtering to the Value Help of the Fields

Usage Scenario

In the Vacation app, you want to enable dependent filtering on value help fields Flight Date, Flight Price, and Currency using the field Flight Number on the Bookings table.

This means in the Bookings table, if you select a flight number from the Flight Number field, then the fields Flight Date, Flight Price, and Currency gets auto-populated with the corresponding values. Similarly, if you select the flight date from the Flight Date field, then the corresponding flights are auto-populated in the Flight Number field, if any. Here, the Flight Date is set as a filter for the Flight Number in the value help dialog.

Task Flow

In this exercise, you will extend the existing @Common.ValueList annotation for the field Flight Number in ConnectionID. This annotation has three fields Flight Date, Flight Price, and Currency as parameters and is of type Common.ValueListParameterDisplayOnly. These fields are displayed in the value help dialog but they are not auto-populated even after the flight number is selected from the Flight Number field as Flight Number isn't selected as filters for these fields. To achieve dependent filtering, you must change the parameter type of FlightDate, Price, and Currencycode_code to Common.ValueListParameterInOut.

Prerequisites

You have completed the exercise Add Date Fields and a Multiline Input Field to the Object Page Subsection in the unit Configuring the Body of the Object Page (lesson: Adapting Input Fields). Alternatively, you can check out its solution branch: solution/add-date-multiline-text-placeholder.

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

ExerciseStart Exercise

Steps

Open your CAP project in SAP Business Application Studio.
1. In the Explorer view, select Projects\fiori-elements-v4-cap-advanced\app\travel_processor\value-helps.cds. The value-helps.cds file opens.
  You can see the annotations of the field ConnectionID for the entity, Booking.

Extend the @Common.ValueList annotation by adding the following code:

Code snippet

      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: FlightDate,  ValueListProperty: 'FlightDate'},
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: FlightPrice,  ValueListProperty: 'Price'},
      {$Type: 'Common.ValueListParameterInOut', LocalDataProperty: CurrencyCode_code, ValueListProperty: 'CurrencyCode_code'},

Expand

Check the dependent filtering behavior on the value help of an object page table on the app.
1. Open the Vacations app.
2. Choose Edit. The edit version of the page appears.
3. Choose Create to create a new booking entry.
4. From the Flight Number field, choose the input help to open the drop-down list with valid values. The Select value help dialog appears with the list of airline details.
5. Choose the required airline.
  Result
  You can see that the Flight Date field is auto-populated with the required information.
6. Select Show More Per Row icon.
  Result
  You can see that the Flight Price and the Currency fields are auto-populated with the required information.

Result

You have now enabled dependent filtering for the value help of fields in the object page table. Similarly, you can enable dependent filtering for the value help of fields in the list report filter bar.

Note

You can find the solution for this exercise on GitHub.
The solution branch is solution/add-value-help-for-dependent-filtering.
You can see the code changes compared to the previous branch on GitHub.

Next Steps

For more information, see

Next lesson