Adding a Chart to the List Report

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.

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.

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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      12345678910111213141516171819202122232425
      annotate TravelService.Travel with @Aggregation.ApplySupported: {
        Transformations       : [
          'aggregate',
          'topcount',
          'bottomcount',
          'identity',
          'concat',
          'groupby',
          'filter',
          'expand',
          'search'
        ],
        Rollup                : #None,
        PropertyRestrictions  : true,
        GroupableProperties   : [
          to_Customer_CustomerID,
          to_Agency_AgencyID,
          TravelStatus_code,
          BeginDate,
          PassengerCountry,
        ],
        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 i18n.properties file.

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

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

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

   8. Add the label name Customer Country.

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

      Note

      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.