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.
You can find all the relevant information about Analytical List Pages in the SAP Fiori Design Guideline. 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:
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.
Contains the variant management and a section of global KPI tags, it's possible to display a maximum of three KPIs per application.
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.
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, if you never heard about this subject before I advise you to have a quick look in this article:
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.
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.
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.
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:
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.
To avoid spending time with the data model definition we're going to construct a query on top of the analytical model delivered in my last article, if you didn't check it yet I advise you to have a look before you continue this reading:
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.
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:
This is the expected outcome:
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.
In this section we want only a KPI tag and card, check below the set of annotations expected to achieve this functionality.
Let's translate this diagram and publish the relevant annotations in the header of our CDS view.
And this annotation on the top of our key figure to generate a Data Point (Weight of Luggage).
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.
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:
Let's translate this diagram and publish the relevant annotations in the header of our CDS view.
And this annotation on the top of our dimension (Calendar Year).
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.
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.
Let's translate these diagrams and publish the relevant annotations in the header of our CDS view.
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😞
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:
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:
Just adapt these XML annotations in your UI5 application and you'll achieve the same results. 😉
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.
2. Fill the project name, title, namespace and description.
3. Select the OData service Z_QUERY_FLIGHT_ALP_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.
5. Define the template configuration:
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.
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.
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:
Place this snippet of code inside the keyPerformanceIndicators attribute:
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.
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.
Include a new Common.ValueList annotation and fill the following parameters:
This XML code is generated by the Annotation Modeler:
Include a new group of Facet annotations and fill the following parameters:
This XML code is generated by the Annotation Modeler:
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.
This is the end! I know this is a quite complex subject but I hope you're able to understand the basic concepts around the ALP and enjoyed the content! See you next time! 🙂
You can find all the relevant information about Analytical List Pages in the SAP Fiori Design Guideline. 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.
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.
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, if you never heard about this subject before I advise you to have a quick look in this article:
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.
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.
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.
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
To avoid spending time with the data model definition we're going to construct a query on top of the analytical model delivered in my last article, if you didn't check it yet I advise you to have a look before you continue this reading:
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 |
 |
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'
WeightOfLuggageImportant 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 |
 |
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
CalendarYearImportant 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 | Table |
 |  |
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
WeightOfLuggageImportant 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'
}]
},{
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>Just adapt these XML annotations in your UI5 application and you'll achieve the same results. 😉
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.
2. Fill the project name, title, namespace and description.
3. Select the OData service Z_QUERY_FLIGHT_ALP_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.
5. Define the template configuration:
- OData Collection: Z_QUERY_FLIGHT_ALP
- Qualifier: Default
- Table Type: Responsive
- Auto Hide: TRUE
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.
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.
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.
Include a new Common.ValueList annotation and fill the following parameters:
- CollectionPath: Z_QUERY_FLIGHT_ALP
- PresentationVariantQualifier: FilterBookingsByYear
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
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>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.
This is the end! I know this is a quite complex subject but I hope you're able to understand the basic concepts around the ALP and enjoyed the content! See you next time! 🙂
- SAP Managed Tags:
94 Comments
