ABAP RAP ->Multi-Target Application ->WorkZone deployment: End-to-end development
When you create an ABAP RAP application, the chances are you want to deploy it to SAP Build WorkZone as WorkZone is a central launchpad for end-user to access applications built in Business Technology Platform.
This blog is an end-to-end guide, starting from building RAP application, create a Multi-Target Application (MTA) using Managed Approuter, and finally deploy it to WorkZone service in BTP.
The Setup
In this blog, we will create a simple ABAP RAP service and transactional application to manage users. The prerequisites to perform the exercise is to have :
- BTP trial/enterprise account
- Create ABAP environment instance in BTP(Tutorial)
- Setup Business Application studio in BTP(Tutorial)
- Add Launchpad subscription in BTP(Tutorial)
1. ABAP RAP Application
Database Table
Access your BTP ABAP environment (Steampunk) on ADT and create a package. Create a database table and assign it under the package. Here I named it ‘ZUSER_MASTER”. Save, activate it and assign it to a transport request.
@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); }
Insert test data
Create class method to insert test data into ZUSER_MASTER. Here I named the class zcl_data_generate. Execute below code and you can see that test data is added 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 for database table we just created. Create base CDS view entity ZI_USER_MASTER and projection view entity ZC_USER_MASTER. Save and activate.
@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
}
Metadata Extension
Create a metadata extension for ZC_USER_MASTER. This defines the UI elements of ABAP RAP application. Here we are only defining the label and the position of each fields. Save and activate.
@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;
}
Behavior Definition
Create behavior definitions for ZI_USER_MASTER. In behavior definitions, we can define OData operations(Create, Read, Uptate, Delete), fields attributes and validations, and custom logic associated to the fields. For our exercise, we will define the field mapping so that when the user enters a value for each fields, the corresponding fields in database table will be update. Save and activate.
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 ZC_USER_MASTER.
projection;
strict;
define behavior for zc_user_master alias user_master
{ }
Service Definition
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 in the previous step. Choose OData V4 – UI as the binding type. Activate it and from the left side pane, click the publish button and wait for the OData service to publish. Once published, you will see the entity sets on the right side pane.
Select entity set zc_user_master and click Preview. The entity set corresponds to what we defined in the Service Definition. Browser will show empty list report page. Click Go and the test data we added with class zcl_data_generate should be displayed.
2. Create Multi-Target Application in Business Application Studio
Access Business Application Studio and create a Dev space with type Fiori development.
Login to cloud foundry space
In Business Application Studio, run command ‘cf login’ and enter your credential to login. Make sure to choose the right CF space in you have more than one. This is to set the right Cloud Foundry space to deploy the MTA application.
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.
Fiori element project
Create a Fiori list report 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 |
Click next and you will see few more paramters to fill in. These parameters are attributes for the Fiori element project. It’s importatnt to choose the Project folder that is created for MTA project created previously. In our case, ZUSER_MASTER_MTA is the MTA project folder under /home/user/projects/.
Select Yes on ‘Add deployment configuration to MTA project’.
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 |
If you click next, it will ask you to fill in few more parameters regarding deployment option.
Parameter | Value |
Target | Cloud Foundry |
Destination name | Your CF name |
Fiori Configuration
Parameter | Value |
Semantic object | UserMaster |
Action | Display |
TItle | User master |
Build and deploy MTA project
Build MTA project by right clicking mta.yaml file and choose Build MTA project.
Build process 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.
3. Add Fiori app to Launchpad service
Open SAP Build WorkZone 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).
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.