Fiori in S/4HANA – 3 – Create an SAP Fiori MTA App Using SAP BAS in Managed Approuter

1 day ago 5

This article guides you through the process of creating an SAP Fiori Multi-Target Application (MTA) using SAP Business Application Studio (BAS) with a managed approuter. The MTA architecture allows for the deployment of complex applications across different SAP Cloud Platform services, making it highly scalable and flexible. Before starting, ensure you have set up a development space in SAP Business Application Studio (BAS), which serves as the environment to create and manage your 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.

Go to the View > Command Palette.

Search for Fiori Open Application Generator

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.👇👇

From the Template selection,

Choose Basic

Click Next

Choose the Data Source as “Connect to a System”

Select System as “S/4 HANA” [The destination name you have given in your BTP, will appear in the same name]

Select the OData Service and click Next

Give the View Name & click Next

Now, fill the project attribute details

Click on Next

Select the Deployment Configuration

Choose theTargetas Cloud Foundry

Destination as S/4 HANA [The name of your BTP destination]

Add Application to managed app router? Yes

Click on Next

Provide the Fiori“Launchpad Configuration” details.

And click on Finish.

Now the application is created, and available on your workspace.

First, go to the manifest.json inside the project and change the flexenabled property to false

Note: If you don’t change this to false, it will ask to provide id in each and every UI control you add to the views.

Now, let’s create a few UI control in the UI5 application.

Go to View1.xml and paste the below code inside the page.

Create an image folder and insert the sales order icon image

Now go to the View1.controller.js

Paste the following source code.

Now, add the following css in the css file.

Now, run the application to preview. It should come like this.

You have to add the Fiori Configurations by using the below command, then add semantic object & action again.

npx fiori add flp-config

This is a bug, even though we have added the FLP configuration at the time of creating the app, but again we have to run. Or else the app won’t show in the FLP to add under the catalog and group.

Now, let’s deploy the application to the Cloud Foundry subaccount.

Right click on the mta.yaml file and click on Build MTA Project

Once the built successful, it will generate a new file with .mtar extension.

Now, again right click on the .mtar file and click to MTA Deploy

It will ask you to login the CF account

enter your BTP login Email and Password

Now, select the Org and the Space

Click on Apply

Now, you can go to the HTML5 Applications in the BTP, the application should be visible there.

Click on the App link, it will open the application with data.

Now, let’s configure this app on the BTP Fiori Launchpad. To deploy the app to the BTP FLP, you must subscribe the Launchpad instance.

Click on the Build Work Zone, standard Edition link to open the FLP Site Manager section.

If you have not created any site, click to create a new site. If already created go inside the site.

Now, go to the Channel Manager section. You have to click on the refresh icon to refresh the deployed HTML Apps.

Then go to the Channel Manager > Content Explorer > Click on the HTML5 Apps

Add the new app to your content.

Now the app will be available under “My Content”

Click the New button to create a new Catalog

Add the app to the catalog

Create a new Group

Add the catalog to the group

Go to the Everyone role and add the application.

Now, run the FLP.

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.