Fiori in S/4HANA – 4 – Developing SAP Overview Page Application using BTP BAS

6 hours ago 2

This article provides a step-by-step guide on how to configure a List Report Page using Fiori Elements in SAP Business Application Studio (BAS). Fiori Elements is a powerful framework that simplifies the creation of SAP Fiori applications by offering ready-to-use templates, minimizing the need for manual coding. The List Report Page, in particular, is ideal for presenting and interacting with large datasets. Before going to start, you must have created a development space in the SAP Business Application Studio (BAS).

Before going to start, you must have created a development space in the SAP Business Application Studio (BAS).

Go to the dev space to create the project.

Before we proceed with our tutorial, we would like to give you an opportunity to join our ZAPYard’s learning community where we have more than 35 groups and more than 1600 real SAP Consultants interacting with each other daily. Only SAP topics and not BS. Else, they will be banned from the community without warning. 👇👇👇👇

If you want to be part of ZAPYard’s Discussion Community, please feel free to check the below Link. We Ask, Answer, Help and Learn Together. There are more than 35 groups from different topics like Generative AI, SAP Joule, CAPM, BTP, RAP, BPT, Fiori, iRPA, CAI, CPI, PI/PO, ABAP on HANA, SAPUI5, SAP Build, SAP Adobe Forms, ChatBots, SAC etc. Join any group of your interest and interact with our Community.

Join ZAPYard’s WhatsApp Community – Ask, Answer, Propose & Defend SAP Topics

Now, lets move on to the next topic.

Step 1: Create a new Project from the Template

Go to the View > Command Palette.

Search for Fiori Open Application Generator

From the Template selection,

Choose SAP Overview Page

Click Next

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

Use the ES5 server User Credentials to login to the service.

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.

Before we go to the next step. If you are a woman, we invite you to join the woman exclusive private community – Women In IT Community. 👈👈Please JOIN.👇👇

I have created below highlighted cards in this demo.

Stack Card:

Fill in the mandatory fields and click on Apply.

Go to the manifest.json add the below code under sap.ovp cards.

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

List Card:

Link List Card:

Table Card:

manifest.json file > SAP OVP section

annotation.xml:

Output:

In this article, we have explored the steps to create an SAP Fiori Multi-Target Application (MTA) using SAP Business Application Studio (BAS) with a managed approuter. From project creation to modifying configuration files and deploying to Cloud Foundry, you’ve gained the essential knowledge to develop and deploy a scalable Fiori MTA app. Additionally, we’ve addressed a known bug in the Fiori Launchpad (FLP) configuration process, ensuring that your app is visible and properly integrated into the FLP.

Stay tuned for the next article in this series, “Developing SAP Overview Page Application using BTP BAS,” where we’ll explore building an Overview Page application in SAP BAS, expanding your SAP development capabilities. The article will be posted soon! If you liked it please feel free to share your thoughts or experiences in the comments below.