Overview Page in SAP Business Application Studio using SAP's ES5 Service

[Dhanasupriya]

Hello Community

Many of us interested in learning and playing around SAP BTP but we might not have enough setup. I thank SAP for providing the SAP BTP trial and ES5. Here is my blogpost on building SAP Fiori Elements Overview page(OVP) in SAP Business Application Studio (BAS) and as a service I have used SAP's ES5 demo gateway system service.

Service used: https://sapes5.sapdevcenter.com/sap/opu/odata/sap/SEPMRA_PROD_MAN/SEPMRA_C_PD_ContactPerson

Create a project using OVP 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 OVP.

I have created below highlighted cards in this demo.

Stack Card:

Fill in the mandatory fields and click on Apply.

An Object will get created in manifest.json under sap.ovp cards.

Repeat the above process for List, Link List and Table cards.

List Card:

Link List Card:

Table Card:

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/Common.xml">

        <edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>

    </edmx:Reference>

    <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/sap/SEPMRA_PROD_MAN/$metadata">

        <edmx:Include Namespace="SEPMRA_PROD_MAN" Alias="SEPMRA_PROD_MAN"/>

    </edmx:Reference>

    <edmx:DataServices>

        <Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">

        	<Annotations Target="SEPMRA_PROD_MAN.SEPMRA_C_PD_ContactPersonType">

        	<Annotation Term="UI.HeaderInfo">

					<Record Type="UI.HeaderInfoType">

						<PropertyValue Property="TypeName" String="Contact"/>

						<PropertyValue Property="TypeNamePlural" String="Contacts"/>

						<PropertyValue Property="Title">

							<Record Type="UI.DataField">

								<PropertyValue Property="Value" Path="ContactPerson"/>

							</Record>

						</PropertyValue>

						<PropertyValue Property="Description">

							<Record Type="UI.DataField">

								<PropertyValue Property="Value" Path="Supplier"/>

							</Record>

						</PropertyValue>

					</Record>

				</Annotation>



	<Annotation Term="UI.LineItem" Qualifier="ContactDetails">

					<Collection>

						<Record Type="UI.DataField">

							<PropertyValue Property="Value" Path="ContactPerson"/>

						</Record>

						<Record Type="UI.DataField">

							<PropertyValue Property="Value" Path="Supplier"/>

						</Record>

					</Collection>

				</Annotation>

                	<Annotation Term="UI.PresentationVariant" Qualifier="byDefault5">

					<Record Type="UI.PresentationVariantType">

						<PropertyValue Property="SortOrder">

							<Collection>

								<Record Type="Common.SortOrderType">

									<PropertyValue Property="Property" PropertyPath="ContactPerson"/>

								</Record>

							</Collection>

						</PropertyValue>

						<PropertyValue Property="MaxItems" Int="5"/>

					</Record>

				</Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

Output:

Thank you for going through my blog. Also i would suggest to go through all the SAP Fiori Elements Floorplans and blog them for self and others to learn.

#EnhanceLearning

BR// Dhanasupriya Sidagam 🙂