SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Create an Analytical List Page using ABAP CDS views and annotations

Analytical List Page is a powerful Fiori Element available since SAPUI5 innovation version 1.48, this template provides the ability to create an analytical dashboard with KPIs, charts, tables and also a drill-down navigation to a detail page.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

I’ll try to resume the content of the guidelines explaining the basic concepts behind this template, starting by the structure of the ALP which is composed by three main areas:

  • Page Title
  • Page Header
  • Page Content

We also have a drill-down navigation that can be configured to redirect the user to an Object Page (configured internally through annotations) or a Cross-app navigation (based on a semantic object, action and parameters). Let’s check in details each one of these components.

Page Title

Contains the variant management and a section of global KPI tags, it’s possible to display a maximum of three KPIs per application.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Pressing a KPI tag provides access to the KPI card which contains a chart with additional information, the KPI card is based on the same template of the analytical card provided by Overview Pages.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

The header of the KPI card displays more information about the current value, target, deviation and how the KPI has evolved over time, all of these concepts are based on the Trend-Criticality Calculation.

Page Header

Basically composed by the filter area which allows users to filter the result set. Two types of filters are supported: compact filters and visual filters. Users can toggle between the two filter modes anytime.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Visual filters are composed by a title and an interactive chart, there are three types available at the moment: bar chart, line chart and donut chart. When the user selects one point in the chart the content area is filtered based on the selected value, in the case of a hybrid view the chart and table are filtered at the same time.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Page Content

Consists of either a hybrid view (combination of a chart and a table), a chart-only view, or a table-only view. This is the main working area, where users can interact with both the chart and table visualizations, remember that chart visualization increases the joy of use and enables users to spot relevant data more quickly.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

The analytical list page always comes with the three views, so it means the user can toggle between the different layouts anytime.

Based on all the information presented so far we can think about a basic layout for our demo application. The idea is to construct an application on top of a Flight Bookings report, this means all the components will show information related with flights (e.g. Country, Airline, Flight Date, Bookings). With this statement in mind we can define the relevant objects for each area of the ALP:

  • Page Title
    • KPI Card with Weight of Luggage by Country.
  • Page Header
    • Visual Filter with Total of Bookings by Year.
  • Page Content (Hybrid view)
    • Chart with Total of Bookings by Year and Airline.
    • Table with Total of Bookings and Weight of Luggage by Airline.
  • Drill-down navigation
    • Object page with a simple form with the Airline, Total of Bookings and Weight of Luggage.

All the technical steps to construct our application can be found in the SAP Help. We basically need to configure the App Descriptor and the Annotation file inside our UI5 application, but in this demo I decided to explain an alternative way declaring all the annotations in the ABAP CDS layer, this strategy reduces the configuration work in the UI5 app.

To facilitate the understanding of all the concepts I’m going to start with the ABAP CDS development explaining each one of the items in details before we expose the whole CDS view. After we finish this first section I’m going to explain the remaining steps of configuration inside of the UI5 application.

ABAP CDS

The analytical query has the ability to aggregate data based only in the exposed dimensions, this is an essential functionality for analytical applications, also, we can declare all the UI annotations responsible for the coordination of the front-end in a single CDS view. Let’s start the development thinking only in the relevant fields for the query output.

Query (without annotations)

Let’s construct a draft of the CDS view in a simple form (without the annotations), this way we can focus only in the relevant dimensions, measures and the exposure of the OData service.

We should read data from the cube Z_Cube_FlightBookings and select the following fields:

  • Dimensions:
    • Airline
    • CustomerCountry
    • CalendarYear
  • Key Figures:
    • TotalOfBookings
    • WeightOfLuggage

This is the expected outcome:

@AbapCatalog.sqlViewName: ‘ZQUERYFLIGHTALP’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘Flight (Analytical List Page)’

@Analytics.query: true
@VDM.viewType: #CONSUMPTION
@OData.publish: true

define view Z_Query_Flight_ALP
as select from Z_Cube_FlightBookings
{
@AnalyticsDetails.query.display: #KEY_TEXT
Airline,

@AnalyticsDetails.query.display: #KEY_TEXT
CustomerCountry,

CalendarYear,

TotalOfBookings,

WeightOfLuggage
}

Don’t forget to place the annotation @Analytics.query: true to transform this CDS view in an analytical query and use the power of aggregation, as I mentioned before, this item is essential for this kind of application. Also, place the @OData.publish: true in the header to publish an OData service project automatically based on the structure of our CDS view.

Now we populated all the relevant fields and we can start to fill the relevant annotations for each one of the ALP sections.

Page Title (KPIs)

In this section we want only a KPI tag and card, check below the set of annotations expected to achieve this functionality.

KPI Card

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Let’s translate this diagram and publish the relevant annotations in the header of our CDS view.

@UI.selectionPresentationVariant: {
qualifier: ‘KPIWeightByCountry’,
presentationVariantQualifier: ‘KPIWeightByCountry’,
selectionVariantQualifier: ‘KPIWeightByCountry’
}

@UI.presentationVariant: {
qualifier: ‘KPIWeightByCountry’,
text: ‘KPI: Weight of Luggage per Country’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartWeightByCountry’
},{
type: #AS_DATAPOINT,
qualifier: ‘WeightOfLuggage’
}]
}

@UI.selectionVariant: {
qualifier: ‘KPIWeightByCountry’,
text: ‘KPI Weight By Country’
}

@UI.chart: {
qualifier: ‘ChartWeightByCountry’,
chartType: #COLUMN,
dimensions: [ ‘CustomerCountry’ ],
measures: [ ‘WeightOfLuggage’ ],
dimensionAttributes: [{
dimension: ‘CustomerCountry’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘WeightOfLuggage’,
role: #AXIS_1
}]
}

And this annotation on the top of our key figure to generate a Data Point (Weight of Luggage).

@UI.dataPoint.title: ‘Weight of Luggage’
WeightOfLuggage

Important Note: The Descriptor Settings are configured in the manifest.json file inside the UI5 application. We’ll check this configuration in details in the final section of this article.

Page Header (Visual Filter)

To include an attribute in the filter we usually work with the @UI.SelectionFields annotation, but to work with a visual filter we have some extra steps to configure. Check the relevant set of annotations expected for the visual filter below:

Visual Filter

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Let’s translate this diagram and publish the relevant annotations in the header of our CDS view.

@UI.presentationVariant: {
qualifier: ‘FilterBookingsByYear’,
text: ‘Filter: Bookings by Year’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartBookingsByYear’
}]
}

@UI.chart: {
qualifier: ‘ChartBookingsByYear’,
chartType: #DONUT,
dimensions: [ ‘CalendarYear’ ],
measures: [ ‘TotalOfBookings’ ],
dimensionAttributes: [{
dimension: ‘CalendarYear’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘TotalOfBookings’,
role: #AXIS_1
}]
}

And this annotation on the top of our dimension (Calendar Year).

@UI.selectionField.position: 10
CalendarYear

Important Note: CommonValueList cannot be configured inside the CDS view, so we’re going to adapt this annotation directly in the annotation file inside the UI5 application. We’ll check this configuration in details in the final section of this article.

Page Content (Hybrid view)

Since we are working with a Hybrid View we should prepare annotations for the chart and table, check below the expected set of annotations for each one of them.

Chart

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Table

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Let’s translate these diagrams and publish the relevant annotations in the header of our CDS view.

@UI.selectionPresentationVariant: {
qualifier: ‘Default’,
presentationVariantQualifier: ‘Default’,
selectionVariantQualifier: ‘Default’
}

@UI.presentationVariant: {
qualifier: ‘Default’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartDefault’
}]
}

@UI.selectionVariant: {
qualifier: ‘Default’,
text: ‘Default’
}

@UI.chart: {
qualifier: ‘ChartDefault’,
chartType: #COLUMN,
dimensions: [ ‘CalendarYear’, ‘Airline’ ],
measures: [ ‘TotalOfBookings’ ],
dimensionAttributes: [{
dimension: ‘CalendarYear’,
role: #SERIES
},{
dimension: ‘Airline’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘TotalOfBookings’,
role: #AXIS_1
}]
}

To create a table we need to include annotations for each one of the columns, place these annotations on the top of the fields (Airline, TotalOfBookings and WeightOfLuggage):

@UI.lineItem.position: 10
Airline,

@UI.lineItem.position: 20
TotalOfBookings,

@UI.lineItem.position: 30
WeightOfLuggage

Important Note: The Descriptor Settings are configured in the manifest.json file inside of the UI5 application. We’ll check this configuration in details in the final section of this article.

Let’s aggregate all of these pieces of code and construct the final version of our CDS view, this is the expected result:

@AbapCatalog.sqlViewName: ‘ZQUERYFLIGHTALP’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘Flight (Analytical List Page)’

@Analytics.query: true
@VDM.viewType: #CONSUMPTION
@OData.publish: true

@UI.selectionPresentationVariant: [{
qualifier: ‘KPIWeightByCountry’,
presentationVariantQualifier: ‘KPIWeightByCountry’,
selectionVariantQualifier: ‘KPIWeightByCountry’
},{
qualifier: ‘Default’,
presentationVariantQualifier: ‘Default’,
selectionVariantQualifier: ‘Default’
}]

@UI.presentationVariant: [{
qualifier: ‘KPIWeightByCountry’,
text: ‘KPI: Weight of Luggage per Country’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartWeightByCountry’
},{
type: #AS_DATAPOINT,
qualifier: ‘WeightOfLuggage’
}]
},{
qualifier: ‘FilterBookingsByYear’,
text: ‘Filter: Bookings by Year’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartBookingsByYear’
},{
type: #AS_DATAPOINT,
qualifier: ‘TotalOfBookings’
}]
},{
qualifier: ‘Default’,
visualizations: [{
type: #AS_CHART,
qualifier: ‘ChartDefault’
}]
}]

@UI.selectionVariant: [{
qualifier: ‘KPIWeightByCountry’,
text: ‘Default’
},{
qualifier: ‘Default’,
text: ‘Default’
}]

@UI.chart: [{
qualifier: ‘ChartWeightByCountry’,
chartType: #COLUMN,
dimensions: [ ‘CustomerCountry’ ],
measures: [ ‘WeightOfLuggage’ ],
dimensionAttributes: [{
dimension: ‘CustomerCountry’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘WeightOfLuggage’,
role: #AXIS_1
}]
},{
qualifier: ‘ChartBookingsByYear’,
chartType: #DONUT,
dimensions: [ ‘CalendarYear’ ],
measures: [ ‘TotalOfBookings’ ],
dimensionAttributes: [{
dimension: ‘CalendarYear’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘TotalOfBookings’,
role: #AXIS_1
}]
},{
qualifier: ‘ChartDefault’,
chartType: #COLUMN,
dimensions: [ ‘CalendarYear’, ‘Airline’ ],
measures: [ ‘TotalOfBookings’ ],
dimensionAttributes: [{
dimension: ‘CalendarYear’,
role: #SERIES
},{
dimension: ‘Airline’,
role: #CATEGORY
}],
measureAttributes: [{
measure: ‘TotalOfBookings’,
role: #AXIS_1
}]
}]

define view Z_Query_Flight_ALP
as select from Z_Cube_FlightBookings
{
@AnalyticsDetails.query.display: #KEY_TEXT
@UI.lineItem.position: 10
Airline,

@AnalyticsDetails.query.display: #KEY_TEXT
CustomerCountry,

@UI.selectionField.position: 10
CalendarYear,

@UI.lineItem.position: 20
TotalOfBookings,

@UI.dataPoint.title: ‘Weight of Luggage’
@UI.lineItem.position: 30
WeightOfLuggage
}

If you don’t have access to ABAP CDS you can still configure all of your annotations locally (inside the UI5 application). This CDS view generates the following output in the XML format:

<Annotations Target=”Z_QUERY_FLIGHT_ALP_CDS.Z_QUERY_FLIGHT_ALPType”>
<Annotation Term=”UI.Chart” Qualifier=”ChartDefault”>
<Record Type=”UI.ChartDefinitionType”>
<PropertyValue Property=”ChartType” EnumMember=”UI.ChartType/Column” />
<PropertyValue Property=”Dimensions”>
<Collection>
<PropertyPath>Airline</PropertyPath>
<PropertyPath>CalendarYear</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”DimensionAttributes”>
<Collection>
<Record Type=”UI.ChartDimensionAttributeType”>
<PropertyValue Property=”Dimension” PropertyPath=”Airline” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartDimensionRoleType/Category” />
</Record>
<Record Type=”UI.ChartDimensionAttributeType”>
<PropertyValue Property=”Dimension” PropertyPath=”CalendarYear” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartDimensionRoleType/Series” />
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property=”Measures”>
<Collection>
<PropertyPath>TotalOfBookings</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”MeasureAttributes”>
<Collection>
<Record Type=”UI.ChartMeasureAttributeType”>
<PropertyValue Property=”Measure” PropertyPath=”TotalOfBookings” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartMeasureRoleType/Axis1″ />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.Chart” Qualifier=”ChartBookingsByYear”>
<Record Type=”UI.ChartDefinitionType”>
<PropertyValue Property=”ChartType” EnumMember=”UI.ChartType/Donut” />
<PropertyValue Property=”Dimensions”>
<Collection>
<PropertyPath>CalendarYear</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”DimensionAttributes”>
<Collection>
<Record Type=”UI.ChartDimensionAttributeType”>
<PropertyValue Property=”Dimension” PropertyPath=”CalendarYear” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartDimensionRoleType/Category” />
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property=”Measures”>
<Collection>
<PropertyPath>TotalOfBookings</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”MeasureAttributes”>
<Collection>
<Record Type=”UI.ChartMeasureAttributeType”>
<PropertyValue Property=”Measure” PropertyPath=”TotalOfBookings” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartMeasureRoleType/Axis1″ />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.Chart” Qualifier=”ChartWeightByCountry”>
<Record Type=”UI.ChartDefinitionType”>
<PropertyValue Property=”ChartType” EnumMember=”UI.ChartType/Column” />
<PropertyValue Property=”Dimensions”>
<Collection>
<PropertyPath>CustomerCountry</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”DimensionAttributes”>
<Collection>
<Record Type=”UI.ChartDimensionAttributeType”>
<PropertyValue Property=”Dimension” PropertyPath=”CustomerCountry” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartDimensionRoleType/Category” />
</Record>
</Collection>
</PropertyValue>
<PropertyValue Property=”Measures”>
<Collection>
<PropertyPath>WeightOfLuggage</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property=”MeasureAttributes”>
<Collection>
<Record Type=”UI.ChartMeasureAttributeType”>
<PropertyValue Property=”Measure” PropertyPath=”WeightOfLuggage” />
<PropertyValue Property=”Role” EnumMember=”UI.ChartMeasureRoleType/Axis1″ />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.DataPoint” Qualifier=”WeightOfLuggage”>
<Record>
<PropertyValue Property=”Value” Path=”WeightOfLuggage” />
<PropertyValue Property=”Title” String=”Weight of Luggage” />
</Record>
</Annotation>
<Annotation Term=”UI.LineItem”>
<Collection>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”Airline” />
</Record>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”TotalOfBookings” />
</Record>
<Record Type=”UI.DataField”>
<PropertyValue Property=”Value” Path=”WeightOfLuggage” />
</Record>
</Collection>
</Annotation>
<Annotation Term=”UI.PresentationVariant” Qualifier=”Default”>
<Record>
<PropertyValue Property=”Text” String=”” />
<PropertyValue Property=”Visualizations”>
<Collection>
<AnnotationPath>@UI.Chart#ChartDefault</AnnotationPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.PresentationVariant” Qualifier=”FilterBookingsByYear”>
<Record>
<PropertyValue Property=”Text” String=”Filter: Bookings by Year” />
<PropertyValue Property=”Visualizations”>
<Collection>
<AnnotationPath>@UI.Chart#ChartBookingsByYear</AnnotationPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.PresentationVariant” Qualifier=”KPIWeightByCountry”>
<Record>
<PropertyValue Property=”Text” String=”KPI: Weight of Luggage per Country” />
<PropertyValue Property=”Visualizations”>
<Collection>
<AnnotationPath>@UI.DataPoint#WeightOfLuggage</AnnotationPath>
<AnnotationPath>@UI.Chart#ChartWeightByCountry</AnnotationPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”UI.SelectionFields”>
<Collection>
<PropertyPath>CalendarYear</PropertyPath>
</Collection>
</Annotation>
<Annotation Term=”UI.SelectionPresentationVariant” Qualifier=”Default”>
<Record>
<PropertyValue Property=”Text” String=”” />
<PropertyValue Property=”SelectionVariant” Path=”@UI.SelectionVariant#Default” />
<PropertyValue Property=”PresentationVariant” Path=”@UI.PresentationVariant#Default” />
</Record>
</Annotation>
<Annotation Term=”UI.SelectionPresentationVariant” Qualifier=”KPIWeightByCountry”>
<Record>
<PropertyValue Property=”Text” String=”” />
<PropertyValue Property=”SelectionVariant” Path=”@UI.SelectionVariant#KPIWeightByCountry” />
<PropertyValue Property=”PresentationVariant” Path=”@UI.PresentationVariant#KPIWeightByCountry” />
</Record>
</Annotation>
<Annotation Term=”UI.SelectionVariant” Qualifier=”Default”>
<Record>
<PropertyValue Property=”Text” String=”Default” />
</Record>
</Annotation>
<Annotation Term=”UI.SelectionVariant” Qualifier=”KPIWeightByCountry”>
<Record>
<PropertyValue Property=”Text” String=”KPI Weight By Country” />
</Record>
</Annotation>
<Annotation Term=”Communication.Contact”>
<Record>
<PropertyValue Property=”adr”>
<Collection>
<Record>
<PropertyValue Property=”type” EnumMember=”Communication.ContactInformationType/pref” />
<PropertyValue Property=”country” Path=”CustomerCountry” />
</Record>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term=”Communication.Address”>
<Record>
<PropertyValue Property=”type” EnumMember=”Communication.ContactInformationType/pref” />
<PropertyValue Property=”country” Path=”CustomerCountry” />
</Record>
</Annotation>
</Annotations>

UI5 application (Web IDE)

Before you start your UI5 application don’t forget to activate your OData service in the SAP Gateway, use transaction /IWFND/MAINT_SERVICE to activate and /IWFND/GW_CLIENT to test your service.

After the service activation we can start the application development, open your Web IDE account and from the Workspace folder, right click and select the option New -> Project from Template. Check the following steps:

1. Select Analytical List Page as the template.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

2. Fill the project name, title, namespace and description.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

3. Select the OData service Z_QUERY_FLIGHT_ALP_CDS.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

4. Select the remote annotation file to expose the annotations generated through the ABAP CDS view, this file contains the XML output demonstrated in the previous section.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

5. Define the template configuration:

  • OData Collection: Z_QUERY_FLIGHT_ALP
  • Qualifier: Default
  • Table Type: Responsive
  • Auto Hide: TRUE

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Note: Don’t forget to place Default as the qualifier, since we defined this name in our ABAP CDS view we need to configure this name in the template customization.

6. Press Finish to conclude the Web IDE wizard. This is the structure of your project after you conclude all the steps.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Inside of the App descriptor (manifest.json) we can find the relevant code for the Analytical List Page (sap.ui.generic.app), this snippet of code is generated automatically based on our previous configuration through the Web IDE wizard.

“sap.ui.generic.app”: {
“_version”: “1.3.0”,
“pages”: {
“AnalyticalListPage|Z_QUERY_FLIGHT_ALP”: {
“entitySet”: “Z_QUERY_FLIGHT_ALP”,
“component”: {
“name”: “sap.suite.ui.generic.template.AnalyticalListPage”,
“list”: true,
“settings”: {
“tableType”: “ResponsiveTable “,
“multiSelect”: false,
“qualifier”: “Default”,
“autoHide”: true,
“showGoButtonOnFilterBar”: false,
“condensedTableLayout”: false,
“keyPerformanceIndicators”: {}
}
},
“pages”: {
“ObjectPage|Z_QUERY_FLIGHT_ALP”: {
“entitySet”: “Z_QUERY_FLIGHT_ALP”,
“component”: {
“name”: “sap.suite.ui.generic.template.ObjectPage”
}
}
}
}
}
}

We still have some pending configurations to include in the App descriptor (manifest.json) and in our local annotation file (annotation.xml). These are the remaining items we must configure inside the application:

  • KPI tag and card in the manifest.json;
  • Visual filter in the annotation.xml;
  • Object page layout in the annotation.xml.

KPI (manifest.json)

Place this snippet of code inside the keyPerformanceIndicators attribute:

“keyPerformanceIndicators”: {
“WeightByCountry”: {
“model”: “kpi”,
“entitySet”: “Z_QUERY_FLIGHT_ALP”,
“qualifier”: “KPIWeightByCountry”
}
}

Don’t forget to create a new model called kpi pointing to your data souce, in my example the model references the mainService data source but you could use a different source if you want.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Visual Filter (annotation.xml)

Configure a Common.ValueList annotation for the property CalendarYear. For this task you can use the annotation modeler or configure directly in the XML code.

Using the annotation modeler select a new Target for the property CalendarYear.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Include a new Common.ValueList annotation and fill the following parameters:

  • CollectionPath: Z_QUERY_FLIGHT_ALP
  • PresentationVariantQualifier: FilterBookingByYear

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

This XML code is generated by the Annotation Modeler:

<Annotations Target=”Z_QUERY_FLIGHT_ALP_CDS.Z_QUERY_FLIGHT_ALPType/CalendarYear”>
<Annotation Term=”Common.ValueList”>
<Record Type=”Common.ValueListType”>
<PropertyValue Property=”CollectionPath” String=”Z_QUERY_FLIGHT_ALP”/>
<PropertyValue Property=”Parameters”/>
<PropertyValue Property=”PresentationVariantQualifier” String=”FilterBookingsByYear”/>
</Record>
</Annotation>
</Annotations>

Object Page (annotation.xml)

Include a new group of Facet annotations and fill the following parameters:

  • UI.CollectionFacet
    • ID: MainSection
    • Label: Details (i18n string)
    • UI.ReferenceFacet
      • Target: @UI.lineItem

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

This XML code is generated by the Annotation Modeler:

<Annotation Term=”UI.Facets”>
<Collection>
<Record Type=”UI.CollectionFacet”>
<PropertyValue Property=”ID” String=”MainSection”/>
<PropertyValue Property=”Label” String=”{@i18n&gt;DETAILS}”/>
<PropertyValue Property=”Facets”>
<Collection>
<Record Type=”UI.ReferenceFacet”>
<PropertyValue Property=”Target” AnnotationPath=”@UI.LineItem”/>
</Record>
</Collection>
</PropertyValue>
</Record>
</Collection>
</Annotation>

Testing the Analytical List Page

Finally we finished the configuration and now we can start to play with all the functionalities discussed so far, check below a quick presentation of this demo application.

SAP Fiori for SAP S/4HANA, SAP Fiori, SAPUI5, SAP ABAP CDS

Leave a Reply

Your email address will not be published. Required fields are marked *