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

[Dhanasupriya]

Hello All

Please check here my blog 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:

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>

Preview the application, click on Go button from the filter bar and see the result.

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:

Please suggest/ comment if anything has to be changed/ added.

Thank you!!

#EnhanceLearning

BR// Dhanasupriya Sidagam