abap2UI5 – (1/7) Introduction: Developing UI5 Apps in pure ABAP

Welcome to the first part of a blog series introducing abap2UI5.

abap2UI5 is an open-source project providing a pure ABAP approach for developing UI5 apps without JavaScript, OData and RAP — similar to the past, when only a few lines of ABAP were needed to display inputs and tables using Selection Screens and ALVs. The project is designed with a minimal system footprint and runs in both on-premise and cloud environments.

This first post provides an overview of the project’s functionality and a step-by-step guide to its development process.

Find all the information about the project on GitHub and stay up-to-date by following on Twitter.

Blog Series

Features

• easy to use – implement just one interface for a standalone UI5 application
• pure ABAP – development using 100% ABAP (no JavaScript, EML, DDL or Customizing)
• small system footprint – based on a plain http handler (no BSP, OData, CDS, BOPF or RAP)
• cloud and on-premise ready – works with both language versions (ABAP for Cloud, Standard ABAP)
• high system compatibility – runs on all ABAP releases (from NW 7.02 to ABAP 2305)
• easy installation – abapGit project, no additional app deployment needed

To install the project use abapGit. Clone the repository, create a new HTTP service and call abap2UI5. Detailed information can be found in part 6 of this series. Abap2UI5 is compatible with all ABAP releases and language versions:

• BTP ABAP Environment (ABAP for Cloud)
• S/4 Public Cloud ABAP Environment (ABAP for Cloud)
• S/4 Private Cloud or On-Premise (ABAP for Cloud, Standard ABAP)
• R/3 NetWeaver AS ABAP 7.50 or higher (Standard ABAP)
• R/3 NetWeaver AS ABAP 7.02 to 7.42 (Standard ABAP) – use the downport repository

Demos

For an impression of the possibilities of abap2UI5, take a look at the demos presented in this blog series — everything is created in pure ABAP:

Selection Screens (Blog 2/7)	Tables, Lists, Table Maintenance (Blog 2/7)
Popups, F4-Helps (Blog 3/7)	MIME Editor, File Upload, Visualization (Blog 4/7)

But first let’s start with a basic example.

Basic Example

A simple abap2UI5 app with an input and a message output looks like this:

CLASS z2ui5_cl_app_demo_01 DEFINITION PUBLIC.

  PUBLIC SECTION.

    INTERFACES z2ui5_if_app.

    DATA product  TYPE string.
    DATA quantity TYPE string.

ENDCLASS.

CLASS z2ui5_cl_app_demo_01 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    "event handling
    CASE client->get( )-event.
      WHEN 'BUTTON_POST'.
        client->message_toast_display( |{ product } { quantity } - sent to the server| ).
    ENDCASE.

    "view rendering
    client->view_display( z2ui5_cl_xml_view=>factory( client
        )->page( title = 'abap2UI5 - First Example'
            )->simple_form( title = 'Form Title' editable = abap_true
                )->content( 'form'
                    )->title( 'Input'
                    )->label( 'quantity'
                    )->input( client->_bind_edit( quantity )
                    )->label( 'product'
                    )->input( client->_bind_edit( product )
                    )->button( text = 'post' press = client->_event( 'BUTTON_POST' )
         )->stringify( ) ).

  ENDMETHOD.
ENDCLASS.

As you can see, to develop an UI5 app with abap2UI5, simply create a new class and implement the method main of the following interface:

INTERFACE z2ui5_if_app PUBLIC.

  METHODS main
    IMPORTING
      client TYPE REF TO z2ui5_if_client.

ENDINTERFACE.

The output of this app looks like this:

abap2UI5 – First Example

Everything works out of the box – you get bidirectional data transfer, event handling and an output.

Development Process

Let’s go through the development process step-by-step starting with the view, then move on to the controller, and finally, we’ll take a look at the model.

View

Abap2UI5 provides the possibility to develop UI5 Views similar to an UI5 freestyle application. You have complete freedom in structuring the view and the flexibility to use a wide range of UI5 controls. You can define it directly as a string or create it with the class z2ui5_cl_xml_view. Let’s take a look at the above app and compare its UI5-View with its definition in abap2UI5:

<Page title="Page title" >
	<f:SimpleForm title="Form Title">
		<f:content>
			<Title text="Input" />
			<Label text="quantity"/>
			<Input value="{/oUpdate/QUANTITY}"/>
			<Label text="product" />
			<Input value="tomato" />
			<Button press="onEvent" text="post"/>
		</f:content>
	</f:SimpleForm>
</Page>

view->page( title = 'Page title' )
        )->simple_form( 'Form Title'
          )->content( 'f'
             )->title( 'Input'
             )->label( 'quantity'
             )->input( client->_bind_edit( quantity )
             )->label( 'product'
             )->input( value = product editable = abap_false
             )->button( text = 'post'  press    = client->_event( 'BUTTON_POST' ) ).

This is just a simple example and in the following blog posts, we will expand its functionality to include tables, lists, selection screens, charts and more.

abap2UI5 Control Library

Here are all available UI5 controls you can use with the class z2ui5_cl_xml_view:

z2ui5_cl_xml_view

More controls will be added in the future – check out the source code. Additionally in part five of this series, other view creation approaches with increased flexibility will be explained.

Most UI5 controls are compatible with abap2UI5 without requiring any additional adjustments. For example, Inputs can be used since it only consists of attributes that can be directly sent back to the server. Controls that rely on additional JavaScript logic need to be modified to work with abap2UI5. They have to be encapsulated in a custom control first. We will see an example for this in part four of this blog series, where we will use a custom control for uploading and downloading files.

Controller

The interface z2ui5_if_app has the method ‘main’, which gives you control over the frontend UI5 app, similar to the JavaScript controller of a UI5 freestyle application. Therefore, they look very similar:

sap.ui.controller("sap.ui.myApp.controller.one", {

	onInit: function() {
	},

	onBeforeRendering: function() {	 
	},

	onEvent: function() {
	},

	onAfterRendering: function() {	
	},

	onExit: function() {
	}	
});

  METHOD z2ui5_if_app~main.

    IF check_initialized = abap_false.
      check_initialized = abap_true.
      "set init values here...
    ENDIF.

    CASE client->get( )-event.
      WHEN 'POST'.
        "event handling here...
    ENDCASE.

    "view rendering here...
    client->view_display( z2ui5_cl_xml_view=>factory( cient
        )->shell( )->page(  )->simple_form( 'Title'

  ENDMETHOD.

Handling everything in a single method, without splitting the view and controller at this level, creates flexibility which enables each user to structure their apps in their preferred way. So, the method only serves as a foundational layer upon which users can encapsulate their logic in their own methods. For instance, one method for initialization, another for user commands, and so forth. Now, let’s take a look at how we can raise events at the frontend.

Events

The following events are available:

Event (User-Command)

view->( )->button( 
     text  = 'post' 
     press = client->_event( 'BUTTON_POST' ) ).

Event (Popup Close)

view->button(
     text  = 'close'
     press = client->_event_client( client->cs_event-popup_close ) ).

If more event functions are necessary, the framework can be extended in the future.

Model (Data Binding)

When values need to be displayed in the frontend, define them as public attributes in your abap2UI5 app. These attributes will be bound by the framework, so it needs to have a chance to assign them from the outside. Additionally, if your values will also be updated in the frontend, make sure that they are not defined as read-only, otherwise, abap2UI5 will throw an error when attempting to modify them. There are three ways to bind data and sent it to the frontend:

Direct XML

view( )->label( 'product'
      )->input( value = product editable = abap_false ).

One-Way-Binding

view->( )->label( 'product'
        )->input( value = _bind( product ) editable = abap_false ).

Two-Way-Binding

view( )->label( 'quantity'
      )->input( value = view->_bind_edit( quantity ) editable = abap_true ).​

When defining the view, consider the data transfer to the frontend. To keep the request payload small use one-way-binding by default and two-way-binding only when necessary, such as when values need to be updated from the frontend. Besides that, abap2UI5 takes care of the rest by transforming the data into JSON, sending it to the frontend, and bringing back the updated values, as we’ll see in the final blog post.

What’s next?

Now that you have a basic understanding of abap2UI5, take a look at the samples repository to see the possibilities of abap2UI5:

Samples of abap2UI5

Summary

This was the first part of the introduction to abap2UI5. You now have an understanding of how to develop apps and its general functionality. While this post was quite technical, the upcoming parts of this blog series will showcase more demos & use cases and we will continuously add more features.

In the next blog post, we will develop abap2UI5 apps displaying tables and selection screens.

Thank you for reading this blog post!

Your questions, comments and wishes for this project are always welcome, create an issue or leave a comment.