Adding Fields to the Filter Bar

The filter bar on top of the list report allows you to filter entries using the specified parameters. You can add new fields to the filter bar, enabling new parameters. For example, you can only show entries that start and finish on a certain date.

You can configure the filter bar fields by adding com.sap.vocabularies.UI.v1.SelectionFields to your annotation file.

You can also use SAP Fiori tools. You can choose between two options:

1. Use the guide Add and edit filter fields from guided development. You will look at this option in this exercise.
2. Open the Page Map and add a filter field there. You have already covered this in the unit Getting an Overview of SAP Fiori Tools (lesson: Creating a Second App using the Application Generator).

You will first check how the list report looks before the changes. Then, you will use guided development to add the filter fields. Finally, you will check the results.

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.

1. Open Adapt Filters in the list report. You can see the End Date and Starting Date fields in the popup menu. Select Cancel.

2. Add the fields using guided development.

   1. Switch to SAP Business Application Studio and choose travel_processor > Open Guided Development. Enter filter in the search field to narrow down the number of guides displayed.

   2. Select Add and edit filter fields and choose Start Guide.

   3. Select app/travel_processor/layouts.cds from the CDS File dropdown menu, TravelService from the Service menu and Travel from the Entity menu.

   4. Choose Add selection field and select BeginDate from the Property menu.

   5. Scroll up to add another field. Choose Add selection field and select EndDate from the Property menu.

   6. Scroll down to see the CAP CDS @UI.SelectionFields annotation for your layouts.cds file. Select Insert Snippet to add it.

   7. Open the schema.cds file to see the code that has been added.

3. Check the results.

   1. Switch to the app preview. You can see the Starting Date and End Date fields that have been added to the filter bar.

   2. Note how you can see calendar dates, single dates like Today or Tomorrow and date ranges in the dropdown menus for both fields.

4. Check the mapping of the CAP CDS Date type to OData Edm.Date type. The fields BeginDate and EndDate are of type Date, which is a CAP CDS built-in type. You can see the CAP CDS types for each property in the schema.cds file. The CAP CDS type Date is mapped to the OData EDM type Edm.Date, as you can see in the $metadata file.