Table Maintenance Generator from SAP RAP – Part 3 – FIORI UI App

1 year ago 34

This is the last part of the series to replicate TMG like FIORI application using ABAP RAP. In the previous posts, we have created a RAP Based service where we were able to create, delete and edit (Multi inline). Also, we were able to add a custom action and put some basic validations to show errors to the users. In a nutshell, we have created an OData service in RAP and now we will consume this service to create a FIORI application and deploy it to be used in FIORI Launchpad.

In our FIORI application, Following functionalities will be added:

Inline Creation of Orders
Skip the List page and open Object Page to enter Order entries

Additionally, we will also learn how to deploy a FIORI application in BTP environment

Build and Deploy FIORI app
Consume deployed application in Launchpad using SAP Build Workzone ( Formerly known as Launchpad Service)

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 32 groups and more than 1000 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 32 groups from different topics like RAP, BTP, 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

Preview:

Inline Creation of Orders should be possible (without navigating to detail page)

After successful deployment, Tile should be available in the Launchpad:

On Click of the tile, ObjectPage shall be opened directly and List Page shall be skipped:

Prerequisite:

BTP Trial Account
Basics of FIORI Templates
Basics of SAPUI5
Business Application Studio

1. Creation of List Report FIORI App

In the initial step, we need to create a SAPUI5 application using FIORI templates in BAS from the trial account. We will follow the steps as:

In BAS Workplace, select File-> New Project from Template

Since we want to create FIORI application, select SAP FIORI application and press “Next”:

Select the Template as List Report Page and press “Next”:

Connect to SAP System where RAP based OData service is created and select the service for FIORI application:

Data Source : Connect to a system (we will connect to BTP ABAP system)
System : Select SAP System
ABAP Environment : Instance of ABAP system
Service : OData Service in Backend ABAP System

After providing the required DataSource details and Service, Press “Next”:

Provide Application attributes and deployment options:

Deployment Options are optional. If we know beforehand about details for the deployment environment, we can choose “Yes” and provide details else This can also be done later after the application is built locally.

Choose deployment target ( ABAP/Cloud Foundry )

For using the BTP Trial system, we will deploy our FIORI app in the Cloud Foundry environment as an HTML5 application.

For ABAP environment(S/4 HANA On-premise)

Provide Fiori Launchpad Configuration details and press “Finish”:

With these steps, Our FIORI application project will be created in BAS locally. Now, we can perform UI changes in the application.

2. Perform UI Changes in the app

Inline Creation for Orders:

When we create a new instance for a table in the ObjectPage, a new detail page will be opened and the user needs to enter the details. As per SM30 transaction behavior, we would like to create records using inline creation.

This can be achieved by changing the Table property as CreationMode:Inline.

In BAS, we can set this property using the FIORI Tools.

We can refer the following steps:

Right click on WebApp folder of the UI application created in Step 1 and choose “Page Map”:

Since we need to change the Table settings for Order table which in ObjectPPage, we will edit the ObjectPage of Root Entity:

Select Table under Sections
Choose Creation mode and set “CreationMode at end” true

Skip the List page and open Object Page to enter Order entries

In List Report FIORI template application(created in Step 1), List Page will be opened first . Once we press the Go button and navigate from the Single List entry, the ObjectPage with Order table will be opened. However, In Our use case, List Page doesn’t have any significance since It will always show default single entry with SingletonID equals 1.

Therefore, we can skip the List page and directly navigate to ObjectPage when Application is opened.

For that, We need to initialize the component and navigate to ObjectPage with a specific route.In the component initialization method, we now add a call to initialize the router. We do not need to instantiate the router manually, it is automatically instantiated based on our AppDescriptor configuration and assigned to the component.If a route has been hit, the view of its corresponding target is loaded and displayed.

Expand Webapp folder and open “Component.js”

2. Within Component.extend, add method init as:

Basically in this init function, we are preparing navigation route by providing key value as OrderSingletonID = 1 and IsActiveEntity=true

With this, Whenever the application will be loaded, It will open the ObjectPage for key with SingletonID = 1 and open its active state.

3. Deploy FIORI Application

In step 1 while creating the UI project, we have already provided the deployment information like Environment, Semantic Object and action etc. Inn this step, we will start deployment with 2 steps as:

Step 1. Build the project

Right click on the Project folder and select “Open in integrated terminal”. In the terminal, enter command – npm run build:mta

2. MTA archive file shall be created now in a new folder mta_acrives

Step 2. Deploy the built archive

Next, deploy the generated archive and track the deployment progress in the terminal with the following command.

cf deploy mta_archives/project1_0.0.1.mtar

At the end of the deployment process log, you should see a line that looks similar to this one:

Once Application is deployed successfully, we can see it in the trial subaccount in BTP Cockpit under Subaccount -> HTML5 Applications

Click on project1 and It will open the application:

4. Add it to FIORI Launchpad

For using Launchpad services in SAP BTP, we need to subscribe for SAP Build WorkZone Standard Edition. Once its subscribed and active in the trial account, we will proceed to create our own site:

1. Create content site

We will add all the deployed FIORI Applications to this site.

2. Refresh Content.

By default, content provider for HTML5 Apps will be available. Once a new application is deployed, we need to refresh this content provider.

3. Add to my content from Content Manager

(i) Go to Content Manager

(ii) Select application “Project1”

(iii) Press “Add to my Content”

4. Switch to My Content and create a new group ZapYard.

5 . Assign the application to the group

6. Similarly, assign the application to Role “Everyone”

7. Now, Open the content site created in Step 1 above. We should be able to see a new tile for our deployed application.

Hope this would be useful for you at some point of time. If you have any questions, queries, please feel free to put it in the comments section below and I will be happy to clarify them. 👍👍

Please follow our LinkedIn Page, LinkedIn Group , Facebook Page, Facebook Group, Twitter , Instagram and Telegram SAP Technical Group Signal Group

Do not forget to SUBSCRIBE to our YouTube Channel for Free Courses and Unconventional Interesting Videos.

Do join ZAPYard’s Learning Community.

Read Entire Article