Enriching Value Help with Dependent Filtering

Objective

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
123456789101112

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'} 
    ] 
  }; 
}

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.

The value help dialog for the airline field

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
    123456789101112
    
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'}, 
 …. 
] 
}

    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
    123456789101112
    
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'}, 
 …. 
] 
}

    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
    1234567891011
    
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'}, 
 …. 
] 
}

    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.

The value help dialog for the flight number field

Add Dependent Filtering to the Value Help of the Fields

Usage Scenario

In the Bookings table of the Manage Travels app, you want to add dependent filtering to the value help of Flight Number.

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 get 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 configuration of the Flight Number value help. Currently its value help contains Flight Date, Flight Price, and Currency as display-only parameters. These fields are displayed in the value help dialog but they are not auto-populated after the flight number has been selected from the Flight Number field. 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

  1. Open your CAP project in SAP Business Application Studio.

  2. Open the page editor and go to Flight Number column of the Bookings table on the object page.

    1. Select travel-processor in the Explorer view and choose Show Page Map from the context menu.

    2. Select Configure Page on the object page of the Travel entity.

    3. Select Flight Number under Sections > Bookings > Table > Columns.

  3. Open the dialog to configure value help properties for Flight Number.

    1. In the right window, select Edit Properties for Value Help.

  4. Define Value Help Properties for Flight Number dialog opens. In its Result List section maintain the following values.

    1. For FlightDate select InOut as a Dependency and FlightDate as the local value.

    2. For Price select InOut as a Dependency and FlightPrice as the local value.

    3. For CurrencyCode_code select InOut as a Dependency and CurrencyCode_code as the local value.

    4. Select Apply.

  5. Check the dependent filtering behavior on the value help of an object page table on the app.

    1. Open the Manage Travels 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

Next Steps

For more information, see

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn