Analytical List Page in SAP Business Application Studio using SAP’s ES5 Service

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.

SAP Fiori Application Developer Certification Preparation Guide

ALP consists of:

Service used: https://sapes5.sapdevcenter.com//sap/opu/odata/IWBEP/GWSAMPLE_BASIC/ProductSet

Create a project using ALP template in BAS.

Project Structure:

Right click on the project and open SAP Fiori tools – Open Guided Development.

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.

1. Add a new column to a table

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:

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:

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