Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
aoyang
Contributor
This blog is an end-to-end guide to development and deployment process, from creating ABAP RAP OData service, generate a Fiori element report as Multi-Target Application (MTA) using managed approuter, and finally deploy it to Launchpad service in BTP.

Prerequisites:

  • BTP trial/enterprise account

  • Create ABAP environment instance in BTP(Tutorial)

  • Setup Business Application studio in BTP(Tutorial)

  • Add Launchpad subscription in BTP(Tutorial)


Since the tutorial focuses on the end-to-end process, the application we will create a super simple application.

1. Create ABAP RAP business service


Create package and database table


Access your BTP ABAP environment (Steampunk) on ADT. Create a package, which I've named Z001_AY. Create a database table 'zuser_master' under the package. Save and activate it. When transport request is prompted, create a new transport or assign to the transport request of your choice.
@EndUserText.label : 'User master'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zuser_master {
key client : abap.clnt not null;
key userid : abap.char(10) not null;
first_name : abap.char(20);
last_name : abap.char(20);
address : abap.char(20);
tele_num : abap.char(10); }

Next, create class method zcl_data_generate. Copy paste the below code, save and activate. Execute this code and you can see that sample data is inserted to zuser_master. Go to data preview of the table and check if two records are displayed.
CLASS zcl_data_generate DEFINITION
PUBLIC
FINAL
CREATE PUBLIC .
PUBLIC SECTION.
INTERFACES if_oo_adt_classrun.
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.

CLASS zcl_data_generate IMPLEMENTATION.
METHOD if_oo_adt_classrun~main.
DATA:lt_user_master TYPE STANDARD TABLE OF zuser_master.

delete FROM zuser_master.

lt_user_master = VALUE #( ( userid = '1' first_name = 'Aocheng' last_name = 'Yang' address = 'Somewhere' tele_num = '123456' )
( userid = '2' first_name = 'Bocheng' last_name = 'Yang' address = 'Next door to Alice' tele_num = '987654' )
).

INSERT zuser_master FROM TABLE @lt_user_master.
ENDMETHOD.
ENDCLASS.


 

Create data definition


Create data definitions. Create base CDS view entity zi_user_master and projection view entity zc_user_master. Save and activate them.
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Data definition view entity user master'
define root view entity zi_user_master
as select from zuser_master
{
key userid as Userid,
first_name as First_name,
last_name as Last_name,
address as Address,
tele_num as Tele_num
}

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Projection view entity user master'
@Metadata.allowExtensions: true
define root view entity zc_user_master
provider contract transactional_query
as projection on zi_user_master
{
key Userid,
First_name,
Last_name,
Address,
Tele_num
}

Create metadata extension for zc_user_master. This defines the UI features of Fiori Element List report. Save and activate them.
@Metadata.layer:#CUSTOMER
annotate view zc_user_master with
{
@UI.identification: [{ position:1, label: 'User ID' }]
@UI.lineItem: [{ position:1, label: 'User ID' }]
Userid;
@UI.identification: [{ position:2, label: 'First name' }]
@UI.lineItem: [{ position:2, label: 'First name' }]
First_name;
@UI.identification: [{ position:3, label: 'Last name' }]
@UI.lineItem: [{ position:3, label: 'Last name' }]
Last_name;
@UI.identification: [{ position:4, label: 'Address' }]
@UI.lineItem: [{ position:4, label: 'Address' }]
Address;
@UI.identification: [{ position:5, label: 'Telephone number' }]
@UI.lineItem: [{ position:5, label: 'Telephone number' }]
Tele_num;

}

Create behavior definition


Create behavior definitions for zi_user_master.  Here we define which CRUD operations are used, fields attribute and validations and custom logics associated to the fields. Save and activate it.
managed implementation in class zbp_i_user_master unique;
strict;

define behavior for zi_user_master alias root_user_master
persistent table zuser_master
lock master
authorization master ( instance )
{
mapping for ZUSER_MASTER
{
userid = Userid;
first_name = First_name;
last_name = Last_name;
address = Address;
tele_num = Tele_num;
}
}

Create behavior definitions for zi_user_master.  Here we define which CRUD operations and actions are exposed. Save and activate it.
projection;
strict;

define behavior for zc_user_master alias user_master
{ }

Create service


Create service definition from projection view zc_user_master. Save and activate it.
@EndUserText.label: 'Service definition for ZC_USER_MASTER'
define service ZUI_USER_MASTER {
expose zc_user_master;
}

Create service binding from service definition. Choose OData V4 - UI as the binding type. Activate it and publish the service.


Select entity set zc_user_master and click Preview. Browser will show empty list report page. Click Go and two records should be displayed.





2. Create Multi-Target Application in BAS


Access Business Application Studio and create a dev space with Fiori development(tutorial).

Login to cloud foundry space


In your BAS development space, run command 'cf login' and enter your credential to login. Make sure to choose the right CF space in you have more than one.

Create MTA project


Go to View->Find command and run 'Fiori: Open CF Application Router Generator'. Enter the parameter as follows and finish.























Parameter Value
Application router project path /home/user/projects (default)
MTA ID ZUSER_MASTER_MTA (or your own ID)
MTA Description User master MTA project
Add route module Managed Approuter

Go to File->Open workspace and choose the MTA project just got created. It should look something like this.




Create Fiori element project


Next, generate an app based on ABAP RAP Odata. View->find command and 'Open Template Wizard' Choose Fiori application from template and choose Fiori element. Choose List report object page and enter the followings.



























Parameter Value
Data source Connect to a system
System ABAP Environment on SAP Business Technology Platform
ABAP Environment Your ABAP Environment
Service ZUI_USER_MASTER_O4 > ZUI_USER_MASTER (0001) - OData V4
Main entity ZC_USER_MASTER

Project attribute































Parameter Value
Module name zuser_master
App title User master app
Project folder name /home/user/projects/ZUSER_MASTER_MTA
Minimum UI5 version 1.102.7(source system version)
Add deployment configuration to MTA project (/home/user/projects/ZUSER_MASTER_MTA/mta.yaml) Yes

Add FLP configuration


Yes

Deployment configuration















Parameter Value
Target Cloud Foundry
Destination name Your CF name

Fiori Launchpad Configuration



















Parameter Value
Semantic object UserMaster
Action Display
TItle User master

Build and deploy MTA


Build MTA project by right clicking mta.yaml file and choose Build MTA project.



Build proces should end like this and mta_archives folder should be generated with ZUSER_MASTER_MTA_0.0.1.mtar file under it.


Deploy mtar file by right clicking the file and choose Deploy MTA archive. This might take a few minutes.



Go back to BTP cockpit. As result of deployment, you can see in the HTML5 section, your application is displayed. In addition, if you payed attention to the log, new services associated to your new HTML5 application are created.



Click on the HTML5 application to see the app.



 

3. Add HTML5 app to Launchpad service


Open launchpad service and from the left side pane, go to Site Directory and create a new site.


Go to content manager, change to content explorer, select HTML5 apps and add your app.(if your app is not there, go to channel manager and update HTML5 apps)


Go back to My Content tab and go to Role Everyone and assign your application into the role.


Create a new Group and assign your application in the same manner.


Open the launch pad site and now your app should be displayed there.



For detailed steps, please follow this tutorial.

Conclusion


This is one way to deploy your ABAP RAP application to Fiori Launchpad service. There is another way which is to directly deploy it to the Fiori Launchpad inside Steampunk(ABAP environment dashboard). This might be my next blog topic.
Labels in this area