Please check here my post on building SAP Fiori Elements Analytical List Page(ALP) in SAP Business Application Studio (BAS) and as a service I have used SAP’s ES5 demo gateway system service.
ALP consists of:
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES1.png?resize=730%2C417&ssl=1)
Service used: https://sapes5.sapdevcenter.com//sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet
Create a project using ALP template in BAS.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES2-1-1024x557.png?resize=730%2C397&ssl=1)
Project Structure:
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES3.png?resize=267%2C641&ssl=1)
Right click on the project and open SAP Fiori tools – Open Guided Development.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES4.png?resize=672%2C432&ssl=1)
This would open up the guided development that can be performed wrt to ALP.
In this demo, i have explained on below highlighted annotations in filter and content areas of ALP.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES5-1024x557.png?resize=730%2C397&ssl=1)
1. Add a new column to a table
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES6-1024x547.png?resize=730%2C390&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES7-1024x551.png?resize=730%2C393&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES8.png?resize=730%2C597&ssl=1)
This will add a new column to the table in content area of ALP.
Please repeat the same process to add more columns and check the annotations.
annotation.xml:
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ProductID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Category"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="TypeCode"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="SupplierID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="SupplierName"/>
</Record>
</Collection>
</Annotation>
2. Add an interactive chart:
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES9-1024x208.png?resize=730%2C148&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES10-1024x547.png?resize=730%2C390&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES11-1024x583.png?resize=730%2C416&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES12-1024x527.png?resize=730%2C376&ssl=1)
annotation.xml:
<Annotation Term="UI.Chart">
<Record Type="UI.ChartDefinitionType">
<PropertyValue Property="Title" String="Products"/>
<PropertyValue Property="Description" String="Products and Suppliers"/>
<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
<PropertyValue Property="Dimensions">
<Collection>
<PropertyPath>SupplierName</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property="Measures">
<Collection>
<PropertyPath>TaxTarifCode</PropertyPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
3. Add a new filter field to the Filter Bar:
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES13-1024x555.png?resize=730%2C396&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES14-1024x580.png?resize=730%2C413&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES15.png?resize=730%2C547&ssl=1)
This will add a new filter to the filter area of ALP.
Please repeat the same process to add more filters and check the annotations.
annotation.xml:
<Annotation Term="UI.SelectionFields">
<Collection>
<PropertyPath>ProductID</PropertyPath>
<PropertyPath>SupplierID</PropertyPath>
<PropertyPath>SupplierName</PropertyPath>
</Collection>
</Annotation>
Here comes my end of blog. Below are the whole annotation.xml code and application preview.
annotation.xml:
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">
<edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
</edmx:Reference>
<edmx:Reference Uri="/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata">
<edmx:Include Namespace="GWSAMPLE_BASIC"/>
</edmx:Reference>
<edmx:DataServices>
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="sap.demo">
<Annotations Target="GWSAMPLE_BASIC.Product">
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="ProductID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="Category"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="TypeCode"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="SupplierID"/>
</Record>
<Record Type="UI.DataField">
<PropertyValue Property="Value" Path="SupplierName"/>
</Record>
</Collection>
</Annotation>
<Annotation Term="UI.Chart">
<Record Type="UI.ChartDefinitionType">
<PropertyValue Property="Title" String="Products"/>
<PropertyValue Property="Description" String="Products and Suppliers"/>
<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
<PropertyValue Property="Dimensions">
<Collection>
<PropertyPath>SupplierName</PropertyPath>
</Collection>
</PropertyValue>
<PropertyValue Property="Measures">
<Collection>
<PropertyPath>TaxTarifCode</PropertyPath>
</Collection>
</PropertyValue>
</Record>
</Annotation>
<Annotation Term="UI.SelectionFields">
<Collection>
<PropertyPath>ProductID</PropertyPath>
<PropertyPath>SupplierID</PropertyPath>
<PropertyPath>SupplierName</PropertyPath>
</Collection>
</Annotation>
</Annotations>
</Schema>
</edmx:DataServices>
</edmx:Edmx>
Output
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2021/08/ES16-1024x471.png?resize=730%2C336&ssl=1)