Skip to Content

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:

  • 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'
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

 

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

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
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'
    }]
},{
    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: FilterBookingByYear

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&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.

 

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! 🙂

To report this post you need to login first.

34 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    Hi,

    I followed your guide, but I have some problem.

    1. visual filter was not created.

    this is my annotation file, and i’m not using ABAP CDS View.

    <Annotation Term="UI.SelectionFields">
    	<Collection>
    		<PropertyPath>Id</PropertyPath>
    	</Collection>
    </Annotation>
    <Annotation Term="UI.Facets">
    	<Collection>
    	<Record Type="UI.CollectionFacet">
    		<PropertyValue Property="ID" String="MainSection"/>
    		<PropertyValue Property="Facets">
    	<Collection>
    	<Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Target" AnnotationPath="@UI.LineItem"/>
    	</Record>
            </Collection>
            </PropertyValue>
    	</Record>
    	</Collection>
    </Annotation>
    <Annotation Term="Common.ValueList">
    	<Record Type="Common.ValueListType">
    	<PropertyValue Property="CollectionPath" String="WebIdTestSet"/>
    	<PropertyValue Property="Parameters"/>
    	<PropertyValue Property="PresentationVariantQualifier" String="{@i18n&gt;FILTER_colon_CHART_TEST01}"/>
    	</Record>
    </Annotation>
    <Annotation Term="UI.PresentationVariant" Qualifier="Chart01">
    	<Record Type="UI.PresentationVariantType">
    	<PropertyValue Property="SortOrder"/>
    	<PropertyValue Property="GroupBy"/>
    	<PropertyValue Property="TotalBy"/>
    	<PropertyValue Property="Total"/>
    	<PropertyValue Property="Visualizations">
    	<Collection>
    	<AnnotationPath>@UI.Chart#Chart01</AnnotationPath>
    	</Collection>
    	</PropertyValue>
    	<PropertyValue Property="RequestAtLeast"/>
    	<PropertyValue Property="Text" String="Filter : Chart Test01"/>
    	</Record>
    </Annotation>
    <Annotation Term="UI.Chart" Qualifier="Chart01">
    	<Record Type="UI.ChartDefinitionType">
    	<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut"/>
    	<PropertyValue Property="Measures">
    	<Collection>
    		<PropertyPath>Kmtravelled</PropertyPath>
    	</Collection>
    	</PropertyValue>
    	<PropertyValue Property="MeasureAttributes">
    		<Collection>
    			<Record Type="UI.ChartMeasureAttributeType">
    			<PropertyValue Property="Measure" PropertyPath="Kmtravelled"/>
    			<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
    			</Record>
    		</Collection>
    	</PropertyValue>
    	<PropertyValue Property="Dimensions">
    	<Collection>
    	<PropertyPath>Id</PropertyPath>
    	</Collection>
    	</PropertyValue>
    	<PropertyValue Property="DimensionAttributes">
    	<Collection>
    	<Record Type="UI.ChartDimensionAttributeType">
    	<PropertyValue Property="Dimension" PropertyPath="Id"/>
    	<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
    	</Record>
    	</Collection>
    	</PropertyValue>
    	<PropertyValue Property="Actions"/>
    	<PropertyValue Property="Title" String="Test 1"/>
    	</Record>
    </Annotation>
    <Annotation Term="UI.PresentationVariant" Qualifier="Default">
    	<Record Type="UI.PresentationVariantType">
    		<PropertyValue Property="SortOrder"/>
    		<PropertyValue Property="GroupBy"/>
    		<PropertyValue Property="TotalBy"/>
    		<PropertyValue Property="Total"/>
    		<PropertyValue Property="Visualizations">
    		<Collection>					 
                        <AnnotationPath>@UI.Chart#ChartDefault</AnnotationPath>
    		</Collection>
    		</PropertyValue>
    		<PropertyValue Property="RequestAtLeast"/>
    	</Record>
    </Annotation>
    <Annotation Term="UI.Chart" Qualifier="ChartDefault">
    	<Record Type="UI.ChartDefinitionType">
    		<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
    		<PropertyValue Property="Measures">
    			<Collection>
    				<PropertyPath>Kmtravelled</PropertyPath>
    			</Collection>
    		</PropertyValue>
    		<PropertyValue Property="MeasureAttributes">
    			<Collection>
    				<Record Type="UI.ChartMeasureAttributeType">
    					<PropertyValue Property="Measure" PropertyPath="Kmtravelled"/>
    					<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
    				</Record>
    			</Collection>
    		</PropertyValue>
    		<PropertyValue Property="Dimensions">
    		        <Collection>
    				<PropertyPath>Id</PropertyPath>
    			</Collection>
    		</PropertyValue>
    		<PropertyValue Property="DimensionAttributes">
    			<Collection>
    				<Record Type="UI.ChartDimensionAttributeType">
    					<PropertyValue Property="Dimension" PropertyPath="Id"/>
    					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
    				</Record>
    			</Collection>
    		</PropertyValue>
    		<PropertyValue Property="Actions"/>
    			</Record>
    </Annotation>
    <Annotation Term="UI.SelectionVariant" Qualifier="Default">
    		<Record Type="UI.SelectionVariantType">
    			<PropertyValue Property="Parameters"/>
    			<PropertyValue Property="SelectOptions"/>
    			<PropertyValue Property="Text" String="Default"/>
    		</Record>
    </Annotation>
    <Annotation Term="UI.LineItem">
    		<Collection>
    			<Record Type="UI.DataField">
    				<PropertyValue Property="Value" Path="Id"/>
    			</Record>
    			<Record Type="UI.DataField">
    				<PropertyValue Property="Value" Path="Kmtravelled"/>
    			</Record>
    		</Collection>
    </Annotation>

    Are there any misconfigurations in the annotation file?

    Or is there a process that must precede ABAP section for visual filter construction?

     

    2.  In Annotation Modeler, SelectionVariant and PresentationVariant Path of UI.SelectionPresentationVariant are not set.

     

    Is there a good solution?

    Thank you!

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Jiyoung,

      For the visual filter there is no need to implement the SelecionPresentationVariant you need only the PresentationVariant, check the image below extracted from the official documentation:

      Reviewing your annotations I can notice a few issues with the configuration of your Common.ValueList:

      1. This annotation cannot be declared inside the Entity Type node, actually you need to declare Common.ValueList for a specific Property, like in my example I create a new target pointing to the CalendarYear and declared the annotation inside this node.
      2. You declared your PresentationVariant pointing to an i18n string but you should use a simple string referencing directly the name of your PresentationVariant, in your example I think is Chart01.

      I don’t know exactly the structure of your service but I will try to exemplify these items through the code below:

      <Annotations Target="YOUR_ENTITY_TYPE">
         <!-- All the main annotations should be placed here -->
      </Annotations>
      
      <!-- Notice the Target is pointing to the Property instead of the Entity Type -->
      <Annotations Target="YOUR_ENTITY_TYPE/Id">
          <Annotation Term="Common.ValueList">
              <Record Type="Common.ValueListType">
                  <PropertyValue Property="CollectionPath" String="WebIdTestSet"/>
                  <PropertyValue Property="Parameters"/>
                  <!-- The String points directly to Chart01, no use of i18n resources -->
                  <PropertyValue Property="PresentationVariantQualifier" String="Chart01"/>
              </Record>
          </Annotation>
      </Annotations>
      

      If you still have any questions try to review the article to understand the difference between these configurations.

      Cheers,

      Felipe

      (1) 
      1. Former Member

        Hi  Felipe,

        Thanks for your advice, I was able to create a visual filter. 🙂

        But There are some questions in the process of creating the Analytical List Page.

         

        The following source file is a modified annotation file.

         

        <Annotations Target="ZHR_WEBIDETEST8_SRV.WebIdeTest">
        	<Annotation Term="UI.PresentationVariant" Qualifier="Default">
        		<Record Type="UI.PresentationVariantType">
        			<PropertyValue Property="SortOrder"/>
        			<PropertyValue Property="GroupBy"/>
        			<PropertyValue Property="TotalBy"/>
        			<PropertyValue Property="Total"/>
        			<PropertyValue Property="Visualizations">
        				<Collection>
                                               <AnnotationPath>@UI.Chart#ChartDefault</AnnotationPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="RequestAtLeast"/>
        		</Record>
        	</Annotation>
        	<Annotation Term="UI.PresentationVariant" Qualifier="Filter">
        		<Record Type="UI.PresentationVariantType">
        			<PropertyValue Property="SortOrder"/>
        			<PropertyValue Property="GroupBy"/>
        			<PropertyValue Property="TotalBy"/>
        			<PropertyValue Property="Total"/>
        			<PropertyValue Property="Visualizations">
        				<Collection>
        					<AnnotationPath>@UI.Chart#Filter01</AnnotationPath>
        					<AnnotationPath>@UI.Chart#Filter02</AnnotationPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="RequestAtLeast"/>
        		</Record>
        	</Annotation>
        	<Annotation Term="UI.Chart" Qualifier="Filter01">
        		<Record Type="UI.ChartDefinitionType">
        			<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>
        			<PropertyValue Property="Measures">
        				<Collection>
        					<PropertyPath>Seatsmax</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="MeasureAttributes"/>
        			<PropertyValue Property="Dimensions">
        				<Collection>
        					<PropertyPath>Carrid</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="DimensionAttributes"/>
        			<PropertyValue Property="Actions"/>
        		</Record>
        	</Annotation>
        	<Annotation Term="UI.Chart" Qualifier="Filter02">
        		<Record Type="UI.ChartDefinitionType">
        			<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
        			<PropertyValue Property="Measures">
        				<Collection>
        					<PropertyPath>SeatsmaxB</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="MeasureAttributes"/>
        			<PropertyValue Property="Dimensions">
        				<Collection>
        					<PropertyPath>Carrid</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="DimensionAttributes"/>
        			<PropertyValue Property="Actions"/>
        		</Record>
        	</Annotation>
        	<Annotation Term="UI.SelectionFields">
        		<Collection>
        			<PropertyPath>Carrid</PropertyPath>
        		</Collection>
        	</Annotation>
        	<Annotation Term="UI.LineItem">
        		<Collection>
        			<Record Type="UI.DataField">
        				<PropertyValue Property="Value" Path="Carrid"/>
        			</Record>
        			<Record Type="UI.DataField">
        				<PropertyValue Property="Value" Path="Year"/>
        			</Record>
        			<Record Type="UI.DataField">
        				<PropertyValue Property="Value" Path="Seatsmax"/>
        			</Record>
        		</Collection>
        	</Annotation>
        	<Annotation Term="UI.Chart" Qualifier="ChartDefault">
        		<Record Type="UI.ChartDefinitionType">
        			<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
        			<PropertyValue Property="Measures">
        				<Collection>
        					<PropertyPath>Seatsmax</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="MeasureAttributes">
        				<Collection>
        					<Record Type="UI.ChartMeasureAttributeType">
        						<PropertyValue Property="Measure" PropertyPath="Seatsmax"/>
        						<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
        					</Record>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="Dimensions">
        				<Collection>
        					<PropertyPath>Carrid</PropertyPath>
        					<PropertyPath>Year</PropertyPath>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="DimensionAttributes">
        				<Collection>
        					<Record Type="UI.ChartDimensionAttributeType">
        						<PropertyValue Property="Dimension" PropertyPath="Carrid"/>
        						<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
        					</Record>
        					<Record Type="UI.ChartDimensionAttributeType">
        						<PropertyValue Property="Dimension" PropertyPath="Year"/>
        						<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>
        					</Record>
        				</Collection>
        			</PropertyValue>
        			<PropertyValue Property="Actions"/>
        		</Record>
        	</Annotation>
        </Annotations>
        <Annotations Target="ZHR_WEBIDETEST8_SRV.WebIdeTest/Carrid">
        	<Annotation Term="Common.ValueList">
        		<Record Type="Common.ValueListType">
        			<PropertyValue Property="CollectionPath" String="WebIdeTestSet"/>
        			<PropertyValue Property="Parameters">
        				<Collection/>
        			</PropertyValue>
        			<PropertyValue Property="PresentationVariantQualifier" String="Filter"/>
        		</Record>
        	</Annotation>
        </Annotations>

         

         

        1. I want to have multiple charts on my visual filter.

        Is it impossible to set up multiple visualizations in a UI.PresentationVariant?

         

        2. Chart in Page Content is not displayed.
        And oData is still being called in batch, Can you identify the cause?

         

        Your advice helped me study a lot!

        Thank you !

         

        Jiyoung

         

        (0) 
        1. Felipe de Mello Rodrigues Post author

          Hi Jiyoung,

          Check the answers below:

          1. You can publish only one chart per filter attribute, like in my example, I published a visual filter for CalendarYear and I could publish another chart for the CustomerCountry or Airline, but no option to create a second chart for CalendarYear.
          2. Your table shows the data, your chart doesn’t show nothing but the OData call still works fine? I’m pretty sure you have some error in your annotation file, I can see from the image in your first question that the chart was working fine before, probably you changed something during the last update and impacted the chart by mistake. Try to review all the steps of configuration for the content area.

          Cheers,

          Felipe

          (1) 
    2. Former Member

      Hi  Former Member

       

      Were you able to make visual filters work?I am finding same issue where the visual filters are not working.

       

      Regards

      Radhika

      (0) 
      1. Former Member

        Hi Radhika

         

        With the help of Felipe, the modified annotation source was written in the above comment.

        I wish It could be of help to you.

         

        However, My annotation source show only one graph in a visual filter.

        If you have a good solution, Can you share your annotation file? 🙂

         

        Thank you

        Jiyoung

        (1) 
  2. Former Member

    Very nice blog Felipe. Thank you.

    Can you please explain how the translation(i18n) works for annotation label text for CDS view?

     

    Thanks

    Angshuman

    (0) 
      1. Former Member

        Thank you Felipe.

        I have one more question. In my current development, I am using the CDS annotation and Facet to create the object page. Can you please guide me how to add “icon tab bar” to the object page using local annotation.

         

        Thanks

        Angshuman

        (0) 
        1. Felipe de Mello Rodrigues Post author

          Hi Angshuman,

          I never used this functionality with the Fiori Element before, the idea looks interesting but I need to do a research to understand if this options is currently available. I’ll have a look over the next weeks and maybe post a new article related with this subject.

          Cheers,

          Felipe

          (0) 
  3. Premnarayan Patidar

    Hi Felipe,

    Nice blog !

    Have few below queries, could you please help here.

    1. for my CDS views i have input parameter to load the output, parameters are in the date time format in CDS, but when it launches the on UI i don’t see datepicker to select the date, i have to enter manually, how do i make it to datepicker control?
    2. below are my annotations, while loading app it doesn’t load the visual chart and shows message “[50005] – valueAxis : does not meet the minimum or maximum number of feeds definition” but when i click on setting button from toolbar section and just click on OK without even changing anything in setting it loads the chart, why it does not load on app launch is my question?
    	<Annotation Term="UI.Chart" Qualifier="ChartDefault">
    					<Record Type="UI.ChartDefinitionType">
    						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar"/>
    						<PropertyValue Property="Measures">
    							<Collection>
    								<PropertyPath>SalesDoc</PropertyPath>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="MeasureAttributes">
    							<Collection>
    								<Record Type="UI.ChartMeasureAttributeType">
    									<PropertyValue Property="Measure" PropertyPath="SalesDoc"/>
    									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
    								</Record>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="Dimensions">
    							<Collection>
    								<PropertyPath>MSF</PropertyPath>
    								<PropertyPath>DocumentDate</PropertyPath>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="DimensionAttributes">
    							<Collection>
    								<Record Type="UI.ChartDimensionAttributeType">
    									<PropertyValue Property="Dimension" PropertyPath="MSF"/>
    									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
    								</Record>
    								<Record Type="UI.ChartDimensionAttributeType">
    									<PropertyValue Property="Dimension" PropertyPath="DocumentDate"/>
    									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>
    								</Record>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="Actions"/>
    					</Record>
    				</Annotation>
    				<Annotation Term="UI.LineItem">
    					<Collection>
    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="DocumentDate"/>
    						</Record>
    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="ProductionPlant"/>
    						</Record>
    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="SalesDoc"/>
    						</Record>
    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="MSF"/>
    						</Record>
    						<Record Type="UI.DataField">
    							<PropertyValue Property="Value" Path="SalesDollars"/>
    						</Record>
    					</Collection>
    				</Annotation>
    				<Annotation Term="UI.PresentationVariant" Qualifier="Default">
    					<Record Type="UI.PresentationVariantType">
    						<PropertyValue Property="SortOrder"/>
    						<PropertyValue Property="GroupBy"/>
    						<PropertyValue Property="TotalBy"/>
    						<PropertyValue Property="Total"/>
    						<PropertyValue Property="Visualizations">
    							<Collection>
    								<AnnotationPath>@UI.Chart#ChartDefault</AnnotationPath>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="RequestAtLeast"/>
    					</Record>
    				</Annotation>
    				<Annotation Term="UI.SelectionFields" Qualifier="Default">
    					<Collection>
    						<PropertyPath>DocumentDate</PropertyPath>
    					</Collection>
    				</Annotation>
    				<Annotation Term="UI.Facets">
    					<Collection>
    						<Record Type="UI.ReferenceFacet">
    							<PropertyValue Property="Target" AnnotationPath="@UI.LineItem"/>
    						</Record>
    					</Collection>
    				</Annotation>
    				<Annotation Term="UI.SelectionVariant" Qualifier="Default">
    					<Record Type="UI.SelectionVariantType">
    						<PropertyValue Property="Parameters"/>
    						<PropertyValue Property="SelectOptions"/>
    						<PropertyValue Property="Text" String="Default"/>
    					</Record>
    				</Annotation>​

    Thanks, Prem

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi,

      Thank you for the feedback, regarding your questions check my comments below:

      1. When you expose an Analytical Query through an OData service the system converts all of your dimensions to CHAR, I don’t know exactly the reason but this is the standard behaviour. If you open your $metadata you can check the types of your dimensions converted and because of this reason you can’t see the date picker in your application. A simple work around is to connect your date field to I_CalendarDate view and try to expose other attributes as filters (e.g. month and year).
      2. I think you’re receiving this error because the dimensions you defined in the annotation file are probably returning a huge quantity of data and the chart cannot be rendered properly (e.g. DocumentDate), try to work with dimensions that will aggregate the data in a feasible way, for date fields you can follow the same approach mentioned in the item 1 and expose the data by month and year instead of using the document date.

      Hope this information helps.

      Cheers,

      Felipe

      (0) 
  4. Ozlem Seker

    Hi,

    I created analytical list page  for the Odata I created .The charts are working but there are problems  in list report.

    What do I need to do to relate to this problem?

     

    Thanks,

    Ozlem.

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Ozlem,

      Open the developer tools (chrome) and investigate the log to understand the root cause.

      I’m pretty sure this is an error related with your annotation file, but make sure by checking your log and troubleshooting the application. Try to review all the steps mentioned in this article and confirm that you configured the annotation file properly.

      Cheers,

      Felipe

      (0) 
  5. Priya Kamath

    Hi,

    Below is the Annotation file we have used and followed all the steps as mentioned in the blog. But we are having issues with the KPI tag. Can you help us resolve this.

    <?xml version="1.0" encoding="utf-8"?>
    <edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
    	<edmx:Reference Uri="/sap/bc/ui5_ui5/ui2/ushell/resources/sap/ushell/components/factsheet/vocabularies/UI.xml">
    		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="/sap/opu/odata/sap/ZC_SALE_DEMO_TEST_CDS/$metadata">
    		<edmx:Include Alias="ZC_SALE_DEMO_TEST_CDS" Namespace="ZC_SALE_DEMO_TEST_CDS"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata-data-aggregation-ext/v4.0/cs02/vocabularies/Org.OData.Aggregation.V1.xml">
    		<edmx:Include Alias="Aggregation" Namespace="Org.OData.Aggregation.V1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Capabilities.V1.xml">
    		<edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470974/Common.xml?api=v2">
    		<edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470971/Communication.xml?api=v2">
    		<edmx:Include Alias="vCard" Namespace="com.sap.vocabularies.Communication.v1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Core.V1.xml">
    		<edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
    	</edmx:Reference>
    	<edmx:Reference Uri="http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/vocabularies/Org.OData.Measures.V1.xml">
    		<edmx:Include Alias="CQP" Namespace="Org.OData.Measures.V1"/>
    	</edmx:Reference>
    	<edmx:DataServices>
    		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="ALP.ALP_NEW.ZC_SALE_DEMO_TEST_CDS">
    			<!--===============================================================================
                    Entity Type from chosen collection 
                    ================================================================================-->
    			<Annotations Target="ZC_SALE_DEMO_TEST_CDS.ZC_SALE_DEMO_TESTType">
    				<Annotation Term="UI.Chart" Qualifier="CHARTSALESTARGET">
    					<Record Type="UI.ChartDefinitionType">
    						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>
    						<PropertyValue Property="Measures">
    							<Collection>
    								<PropertyPath>slstrgt</PropertyPath>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="MeasureAttributes">
    							<Collection>
    								<Record Type="UI.ChartMeasureAttributeType">
    									<PropertyValue Property="Measure" PropertyPath="slstrgt"/>
    									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
    									<PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#SALESTARGET"/>
    								</Record>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="Dimensions">
    							<Collection>
    								<PropertyPath>regkey</PropertyPath>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="DimensionAttributes">
    							<Collection>
    								<Record Type="UI.ChartDimensionAttributeType">
    									<PropertyValue Property="Dimension" PropertyPath="userid"/>
    									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
    								</Record>
    							</Collection>
    						</PropertyValue>
    						<PropertyValue Property="Actions"/>
    					</Record>
    				</Annotation>
    				<Annotation Term="UI.DataPoint" Qualifier="SALESTARGET">
    					<Record Type="UI.DataPointType">
    						<PropertyValue Property="Title" String="{@i18n&gt;SALESBYREGION}"/>
    						<PropertyValue Property="Value" Decimal="100.00"/>
    						<PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Number"/>
    					</Record>
    				</Annotation>
    				<Annotation Term="UI.SelectionPresentationVariant">
    					<Record Type="UI.SelectionPresentationVariantType">
    						<PropertyValue Property="SelectionVariant">
    							<Record Type="UI.SelectionVariantType">
    								<PropertyValue Property="Parameters"/>
    								<PropertyValue Property="SelectOptions"/>
    								<PropertyValue Property="Text" String="{@i18n&gt;SALESBYREGION}"/>
    							</Record>
    						</PropertyValue>
    						<PropertyValue Property="PresentationVariant">
    							<Record Type="UI.PresentationVariantType">
    								<PropertyValue Property="SortOrder"/>
    								<PropertyValue Property="GroupBy"/>
    								<PropertyValue Property="TotalBy"/>
    								<PropertyValue Property="Total"/>
    								<PropertyValue Property="Visualizations">
    									<Collection>
    										<AnnotationPath>@UI.DataPoint#SALESTARGET</AnnotationPath>
    										<AnnotationPath>@UI.Chart#CHARTSALESTARGET</AnnotationPath>
    									</Collection>
    								</PropertyValue>
    								<PropertyValue Property="RequestAtLeast"/>
    								<PropertyValue Property="Text" String="{@i18n&gt;SALESBYREGION}"/>
    							</Record>
    						</PropertyValue>
    						<PropertyValue Property="Text" String="{@i18n&gt;SALESBYREGION}"/>
    					</Record>
    				</Annotation>
    				<Annotation Term="UI.Facets">
    					<Collection>
    						<Record Type="UI.CollectionFacet">
    							<PropertyValue Property="ID" String="GeneralInformation"/>
    							<PropertyValue Property="Label" String="{@i18n&gt;GENERAL_INFORMATION}"/>
    							<PropertyValue Property="Facets">
    								<Collection>
    									<Record Type="UI.ReferenceFacet">
    										<PropertyValue Property="Label" String="{@i18n&gt;FIRST_FACET}"/>
    										<PropertyValue Property="Target" AnnotationPath="@UI.Identification"/>
    									</Record>
    								</Collection>
    							</PropertyValue>
    						</Record>
    						<Record Type="UI.ReferenceFacet">
    							<PropertyValue Property="Label" String="{@i18n&gt;SECOND_FACET}"/>
    							<PropertyValue Property="Target" AnnotationPath="to_expense/@UI.LineItem"/>
    						</Record>
    					</Collection>
    				</Annotation>
    			</Annotations>
    			<!--===============================================================================
                    Entity Type from chosen navigation property
                    ================================================================================-->
    			<Annotations Target="ZC_SALE_DEMO_TEST_CDS.ZC_EXPENSE_ALPType">
    				<Annotation Term="UI.Facets">
    					<Collection>
    						<Record Type="UI.CollectionFacet">
    							<PropertyValue Property="ID" String="GeneralInformation"/>
    							<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
    							<PropertyValue Property="Facets">
    								<Collection>
    									<Record Type="UI.ReferenceFacet">
    										<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
    										<PropertyValue Property="Target" AnnotationPath="@UI.Identification"/>
    									</Record>
    								</Collection>
    							</PropertyValue>
    						</Record>
    					</Collection>
    				</Annotation>
    			</Annotations>
    		</Schema>
    	</edmx:DataServices>
    </edmx:Edmx>

    Changes are done in manifest.json is shown below.

    		"keyPerformanceIndicators": {
    							"SALESBYREGION": {
    								"model": "KPI",
    								"entitySet": "ZC_SALE_DEMO_TEST",
    								"qualifier": "SALESBYREGION"
    							}
    						}

     

     

     

     

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Priya,

      I noticed that you published the KPI tag with the qualifier SALESBYREGION in your manifest.json but none of your annotations are associated with this qualifier.

      Please, review your configuration and the steps mentioned in this article to understand how to assign qualifiers for each one of the dependent annotations.

      Cheers,

      Felipe

      (0) 
  6. Tanveer Shaikh

    Hi Felipe,

    Thank you for the excellent blog.

    Is there a way we can hide the chart area in ALP ? I know I can use list report template to not have that chart area but I want to use new and good stuff of ALP but don’t want the chart area.

    Possible ?

    Thanks,

    Tanveer

     

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Tanveer,

      I’m not sure if you can hide the chart but I know you can define the table as the default object in the content area, there is a parameter in the manifest.json for this purpose:

      "defaultContentView": "table"

      You can find more information about this configuration through this link.

      Also, I created a new article explaining how you can search the possibilities and limitations around the Fiori Elements, if you have any similar questions in the future this article can help you.

      Cheers,

      Felipe Rodrigues

      (0) 
  7. Juan Carlos Cuya

    Dear Felipe,

    I tried to replicate the ALP, but I have a problem when trying to visualize the object page of the item in the table, the message “The requested data does not exist” appears. This message only appears when a filter is applied on the data of the table, I observe that the difference is that, when the filter is applied, the internal ID of the item of the table is modified:

    ID item table without filter:

    4.2.2.X.1.1.1.0_2017AEDL

    ID item table with filter:

    4.2.2.X.1.1.1.0_2017AEDL_0F9TUVA1XK69H4RUGC5LKUM72I1HPW28

    
    You can guide me how to solve this error?, thanks

     

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Juan,

      Sorry but is pretty difficult to define a root cause with this set of information only.

      I advise you to debug your application, have a look in the Network activity and check the OData calls, make sure your data model and OData service are working fine before you troubleshoot the application itself.

      Thanks,

      Felipe

      (0) 
  8. Ivan Shadrin

    Hallo Felipe,

    thank you for this really good and comprehensive intro to the ALP.

    The Donut in visual filter bar seems a little bit overcooked.

    Whereas I expect to become something like this:

    I have the same problem. I’ve played with different variatns of @UI.chart annotation, but without success. I’ve also tried to use another chart types. It seems to me, that the lines and bars are not painted at all.

    Have you managed to display it in normal colours?

    Thanks, Ivan

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Ivan,

      It’s funny but I was expecting someone to comment about this issue since I released the article. 😀

      To be honest, I don’t know why the colors don’t appear in the visual filter and since I didn’t have extra time to investigate this subject I still don’t know how to fix it. It might be a bug of the template, but I’m still not sure.

      If I manage to find a solution I’ll let you know.

      Cheers,

      Felipe

      (1) 
      1. Ivan Shadrin

        Hallo Felipe,

        I’ve tried a lot, but I couldn’t solve this problem. Fortunately I have got some other ideas and even a kind of workaround.

        First of all, I have noticed, that other chart types don’t work either.

        Then I have found a very strange error in the browser console:

        2018-07-16 17:01:49.100000 Control ‘sap.suite.ui.generic.template.AnalyticalListPage.control.SmartFilterBarExt’ did not return a class definition from sap.ui.define. – XMLTemplateProcessor

        I did a conclusion, that the problem lies not on my side (CDS-Annotations), but on the side of the Launchpad emulation environment, where my application is being launched in test mode.

        Then I’ve tried various UI5 (to be precise all available) versions in manifest.json, but it didn’t help.

        Then I have deployed my app to the UI5-System. During the deployment I’ve got a warning message, that UI5 version in my System is older than UI5-version in my manifest.json. But in my system it worked fine.

        Thanks a lot for your answer. I can imagine, how many questions do you become every week and I find it really great that you also find the time for answers for at least some of them 🙂

        Cheers, Ivan

         

        (1) 
    1. Felipe de Mello Rodrigues Post author

      Hi Vivek,

      Usually my first advise is to check if your hierarchy is working fine through RSRT or any other UI interface, since you already tested through Analysis for Office we shouldn’t focus in the back-end.

      I never used the Tree Table via List Report but I already implemented via smart controls in a mixed application. I would advise you to create a blank UI5 application, implement the Tree Table via Smart Table and check if the output works fine.

      If it works in the second scenario it might be a bug from the List Report or some extra configuration missing, at least this way you would be able to identify the differences between both apps.

      Hope this information helps.

      Cheers,

      Felipe

      (0) 
  9. gabriel ashlin

    @Felipe de Mello Rodrigues Hello Sir!,

     

    It was indeed a pleasure to read and gain knowledge from this valuable and expensive knowledge shared. Please kindly bear with me on my ignorance in these areas. I noticed that we cannot use annotations multiple times for an instance selection variant and uichart. but i see in most cases of your description you would refer to the term “translate this diagram and publish the relevant annotations in the header of our CDS view”. How can we accommodate all annotations in one cds views?

    Enlight me sir!

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hello Gabriel,

      Thank you for the kind words.

      We can definitely publish multiple annotations in a single CDS view and I’m actually doing that in the current article, notice that sometimes I publish annotations inside of an array using the following convention [ … ], compare the examples below:

      Single annotation

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

      Multiple annotations

      @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'
          }]
      }]

      The system differentiate all of them based on the QUALIFIER field, this is basically the ID of the annotation and it’s really important to fill this field if you want to organize multiple annotations inside the same CDS view.

      PS: The same works when you are publishing local annotations in your UI5 application.

      Cheers,

      Felipe

      (0) 
  10. Sebastian Freilinger-Huber

    Hi Felipe,

    thanks a lot for sharing this whole scenario including a like to your other blog how to create the analytical model in CDS. Very useful information for someone, who wants to build his first ALP app.

    I am just wondering about one part in your coding, which I don’t exactly understand, could you maybe check this:

    I am wondering, why there (in the CDS view with all aggregated annotations) is a qualifier TableofBookings defined with type #AS_DATAPOINT within the visualizations of @UI.presentationVariant.qualifier FilterBookingsByYear. Is this needed? It also seems like this does not appear in the created annotation XML file, which you posted.

    Best regards and keep on posting such useful stuff,

    Sebastian

    (0) 
    1. Felipe de Mello Rodrigues Post author

      Hi Sebastian,

      Thanks for the question.

      Originally, I was planning to place two KPI cards in the article but the content was growing so fast that I decided to remove the Total of Bookings and place only the Weight of Luggage.

      This #AS_DATAPOINT for Total of Bookings is actually a leftover and I didn’t notice so far.

      Thanks for the heads up, I’m going to update the article and remove this statement.

      Regarding ALP development and data points, they’re only relevant for KPI cards, all the information is available in the SAP Help Portal, like the diagram below:

      Cheers,

      Felipe

      (1) 
  11. Neil Ward

    Awesome!

    We managed to create an ALP last year when all the required annotations were not yet available in ABAP CDS, it was quite complicated. great to see you can do all of this with in CDS now.

     

    thanks for blogging.

    (2) 

Leave a Reply