Creating Visual Filters

Objective

After completing this lesson, you will be able to configure visual filters in the list report

Visual Filters

The visual filter bar offers a unique way to filter large data sets through visualizations. This helps the users to recognize facts and situations, while reducing the number of interaction steps needed to gain insights or to identify significant single instances. The visual filter bar allows users to combine measures with filter values. For example, a "Product" might have the filter value "Product Name" and the measure might typically be "Revenue", "Cost", or "Quantity". If you opt for the measure "Revenue", the chart would show the "Revenue by Product", thus enabling the user to filter the data by choosing a particular product name and its revenue.

Chart visualization increases the joy of use and helps users to see relevant data more quickly. For filtering, the visual filter bar uses all of the three types of interactive chart: line chart, bar chart, and donut chart. For more information, see interactive chart: bar chart, line chart and donut chart.

For more information about the design guidelines, see Visual Filter Bar.

The best practice when using visual filters is to have visual filters for each compact filter.

Add Visual Filters to the List Report of the Manage Travels App

Usage Scenario

In this exercise, our objective is to add three visual filters, Customer, Agency, and Begin Date, with the help of the Page Editor. The user can then filter the table by selecting a visualization in the chart.

Task Flow

With the help of the Page Editor, first you will add the visual filters Customer and Agency as they are already used as compact filters in the app. Then, you will add another visual filter Begin Date with a line chart as line charts are only enabled for date fields. To achieve this, we must remove the filter restrictions on the Begin Date field.

Prerequisites

You have completed the exercise Adding a Chart to the List Report in the unit Discovering the Analytical List Page (lesson: Discovering the Analytical List Page. Alternatively, you can check out its solution branch: solution/add-chart-to-listreport.

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 the SAP Business Application Studio.

  2. In the Explorer view, select Projects\fiori-elements-v4-cap-advanced\app\travel_processor.

  3. Right-click on travel_processor.

  4. Select Show Page Map. The Page Map of the Manage Travel app appears.

  5. On the List Report, select the Edit icon. The Page Map of the TravelList page appears.

  6. Under Filter Bar, select the Add icon corresponding to the Filter Fields.

  7. Add the filter bar Agency to the visual filters.

    1. Choose Add Visual Filter. The Add Visual Filter dialog appears.

    2. From the Filter Field dropdown, choose to_Agency_AgencyID.

    3. From the Value Source Property dropdown, choose to_Agency_AgencyID.

    4. Select Add.

  8. Add the filter bar Customer to the visual filters.

    1. Select the Add icon corresponding to Visual Filters.

    2. From the Filter Field dropdown, choose to_Customer_CustomerID.

    3. From the Value Source Property dropdown, choose to_Customer_CustomerID.

    4. Select Add.

  9. Remove the restriction on the BeginDate property.

    1. Select projects.

    2. From the list of options, choose Go to File.

    3. From the list of options, choose schema.cds. The schema.cds file opens.

    4. Remove the BeginDate property from the @Capabilities.FilterRestrictions annotation.

  10. Add the filter bar Begin Date to the visual filters.

    1. Select Page Editor - travel. The Page Map of the travel appears.

    2. On the List Report, select the Edit icon. The Page Map of the TravelList page appears.

    3. Select the Add icon corresponding to Visual Filters.

    4. From the Filter Field dropdown, choose BeginDate.

    5. From the Value Source Property dropdown, choose BeginDate.

    6. From the Chart Type, choose Line.

    7. Select Add.

  11. View all three visual filters on the app.

    1. Open the app in the new tab on the web browser.

    2. On the right, select the Visual Filters icon. You can see the three visual filters, Travel by Agency, Travel by Customer, and Travel by Starting Date in the filter bar.

    3. On the Travel by Agency, select the first component in the bar chart.

    4. Select Go.

    5. On the Travel by Customer, select the first component in the bar chart.

    6. Select Go. You can see the data corresponding to the selected chart in the Travels by Customer Country and Travels table.

    7. On the Travel by Starting Date, select the first component in the line chart.

    8. Select Go. You can see the data corresponding to the selected chart in the Travels by Customer Country and Travels table.

    9. On the Travel by Customer Country, select a bar chart. You can see that the data in the Travels table is filtered based on the selected bar chart.

Result

You have added three visual filters to the app.

Note

Next Steps

For more information, see

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn