End-to-end development: Using MTA managed approuter to deploy RAP(Steampunk) generated app to BTP Launchpad service

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.