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.

ParameterValue
Application router project path/home/user/projects (default)
MTA IDZUSER_MASTER_MTA (or your own ID)
MTA DescriptionUser master MTA project
Add route moduleManaged 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.

ParameterValue
Data sourceConnect to a system
SystemABAP Environment on SAP Business Technology Platform
ABAP EnvironmentYour ABAP Environment
ServiceZUI_USER_MASTER_O4 > ZUI_USER_MASTER (0001) – OData V4
Main entityZC_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’.

ParameterValue
Module namezuser_master
App titleUser master app
Project folder name/home/user/projects/ZUSER_MASTER_MTA
Minimum UI5 version1.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.

ParameterValue
TargetCloud Foundry
Destination nameYour CF name

Fiori Configuration

ParameterValue
Semantic objectUserMaster
ActionDisplay
TItleUser 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.