Adding a Chart to the List Report

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Enable an entity to support aggregation and add a chart to the list report

Transformation Aggregation

For the charts to work, the entity set must support aggregation. SAP Fiori elements supports the transformation aggregation methods such as standard aggregation and custom aggregation.

Transformation Aggregation that Uses Standard Aggregation Methods

To enable the analytical capabilities the entity must be annotated with @Aggregation.ApplySupported. The collection of the @Analytics.AggregatedProperty annotation must list all the aggregatable measures or aggregation methods that are used. For more information, see Transformation Aggregation. For more information on the CAP documentation, see Transformations.

Add a Chart to the List Report of the Manage Travels App

Usage Scenario

In this exercise, the objective is to add aggregate capabilities to the service so that you can add analytical capabilities to the list report page and make it an analytical list page.

The user will be able to see the total number of distinct travels grouped by Customer country. The user can also filter the table by selecting visualization in the chart.

Task Flow

First, you will enhance Travel service with the CDS @Aggregation.ApplySupported annotation, in which you can define GroupableProperties and AggregatableProperties. Once the service is enhanced, you can use the Add Chart functionality in the Page Editor. Finally, you can add the i18n labels to the chart using the Page Editor.


You have to check out the branch solution/initial-app-state-for-analytics.


To enable all features in the analytical list page in the Node.js runtime, we've switched on the new OData parser (odata_new_parser: true), which is still experimental.

Some features such as grouping in the analytical table is not available if you use the ALP with the standard OData parser. For more information, see SAP Fiori Analytical List Page for SFlight.

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.


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

  2. Annotate the Travel entity with the CDS @Aggregation.ApplySupported annotation to enable the analytical capabilities of the service.

    1. Select Search Projects.

    2. Choose Go to File.

    3. Choose travel-service.cds. The travel-service.cds file opens.

    4. Annotate theTravel entity with the following annotation:

      Code snippet
      annotate TravelService.Travel with @Aggregation.ApplySupported: {
        Transformations       : [
        Rollup                : #None,
        PropertyRestrictions  : true,
        GroupableProperties   : [
        AggregatableProperties: [
          {Property: TravelID, }
  3. Add the chart to the list report.

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

    2. Right-click on travel_processor.

    3. Select Show Page Map. The Page Map-travel appears.

    4. Select the Edit icon of the list report page. The Page Map of TravelList appears.

    5. Select Add Chart. The Add Analytical Chart dialog appears.

    6. From the Chart Type dropdown, choose Column.

    7. From the Dimension dropdown, choose PassengerCountry.

    8. From the Measure button, choose Create new measure.

    9. From the Aggregation Method dropdown, choose Count Distinct Values.

    10. Select Add.

  4. Define the label names for Measures and Dimensions.

    1. On the TravelList Page Map, select Chart.

    2. In the right pane, under Title, enter the chart title as Travels by Customer Country.

    3. Select the globe icon corresponding to the chart title.

    4. Select Apply. The chart title is added to the file.

    5. Under Measures, Measure 1Label, select the globe icon.

    6. Select Apply. The existing label name is substituted by i18n>Travels.

    7. Under Dimensions,Dimension 1Label, select the globe icon.

    8. Add the label name Customer Country.

    9. Select Apply. The dimension label is added to the file.


      You can configure additional dimensions by selecting the Default toggle button.

  5. View the chart and group table data based on the chart.

    1. On the Travels by Customer Country, select a bar chart. The count of the data on the Travels table is refined based on the selected bar chart.

    2. Select the View By icon.

    3. From the dropdown, choose Customer.

    4. Select the bar chart. The Travels table displays the travels only of the selected customer.


You have successfully added a chart to the list report of the Manage Travels app.


Next Steps

Log in to track your progress & complete quizzes